react 修改对象参数的值

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

在你的代码中，itemCopy 是通过 useState 声明的状态变量，而直接修改 itemCopy 对象的属性不会触发 React 组件的重新渲染，也不会更新状态。这是因为 setItemCopy 是更新状态的唯一方式，直接修改状态变量不会自动通知 React 进行更新。

为了正确地更新状态并确保组件重新渲染，你应该使用 setItemCopy 方法来更新状态。这样做会创建一个新的对象，React 能够识别到状态的变化并重新渲染组件。

以下是如何正确处理这个问题的示例代码：

import React, { useState } from 'react';

interface QuestionConfiguration {
    id: number;
    name: string;
    defaultFlag?: boolean;
}

function MyComponent() {
    // 假设 item 是从 props 或其他地方获取的
    const item: QuestionConfiguration = {
        id: 1,
        name: 'Sample Question',
        defaultFlag: true
    };

    const [itemCopy, setItemCopy] = useState<QuestionConfiguration | undefined>(item);
    const [isChecked, setIsChecked] = useState(item.defaultFlag || false);

    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const checked = e.target.checked;
        setIsChecked(checked);

        // 使用 setItemCopy 更新状态，创建一个新对象
        setItemCopy(prevItemCopy => {
            if (prevItemCopy) {
                return {
                    ...prevItemCopy,
                    defaultFlag: checked
                };
            }
            return prevItemCopy;
        });

        console.log(itemCopy); // 这里可能仍然显示旧的 itemCopy，更新是异步的
    };

    return (
        <div>
            <input
                type="checkbox"
                checked={isChecked}
                onChange={handleCheckboxChange}
            />
        </div>
    );
}

export default MyComponent;

关键点

1. 使用 setItemCopy 来更新状态: 通过 setItemCopy 函数来更新状态，这样可以确保 React 知道状态已经变化，并且会重新渲染组件。

2. 创建新对象来更新状态: 在更新状态时，最好创建一个新的对象，而不是直接修改现有的对象。这样可以确保 React 的状态管理机制正常工作。

3. 异步更新状态: console.log(itemCopy) 可能显示的是更新前的值，因为 setItemCopy 是异步的。为了确认更新后的状态，可以在组件重新渲染后检查 itemCopy 的值，或者使用 useEffect 钩子来响应状态变化。

处理异步状态更新

如果你需要在状态更新后立即获取更新后的值，可以使用 useEffect 来监听 itemCopy 的变化：

import React, { useState, useEffect } from 'react';

function MyComponent() {
    const [itemCopy, setItemCopy] = useState<QuestionConfiguration | undefined>(item);
    const [isChecked, setIsChecked] = useState(item.defaultFlag || false);

    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const checked = e.target.checked;
        setIsChecked(checked);

        setItemCopy(prevItemCopy => {
            if (prevItemCopy) {
                return {
                    ...prevItemCopy,
                    defaultFlag: checked
                };
            }
            return prevItemCopy;
        });
    };

    useEffect(() => {
        // 这个 effect 会在 itemCopy 更新后执行
        console.log('itemCopy updated:', itemCopy);
    }, [itemCopy]);

    return (
        <div>
            <input
                type="checkbox"
                checked={isChecked}
                onChange={handleCheckboxChange}
            />
        </div>
    );
}

export default MyComponent;

在这个示例中，useEffect 会在 itemCopy 更新后执行，确保你可以看到最新的状态。