无法使用react useState hooks setter更新我的状态变量

Question

下面是功能组件的代码。我正在使用 onClick 事件处理程序更新状态，它会在 useEffect 中显示更新的数据。但是一旦控制脱离 useEffect，状态变量“data”就会恢复到之前的数据。我尝试先不使用 useEffect 来更新它，但问题是一样的。我无法访问其他函数中更新的状态变量。

function Task(props) {
    var initialData = {
        id: '1',
        content: 'somecontent',
        linkedPage: 'somepage',
    };

    const [data, setData] = useState(initialData);

    useEffect(() => {
        console.log(data);
    }, [data]);

    const saveTask = () => {
        console.log(data);
        const obj = {
            name: data.content,
            id: data.id,
        };
    };

这是我更新状态的按钮

                                       <button
                                        className="btn btn-sm btn-secondary px-4"
                                        id={props.task.id}
                                        onClick={() =>
                                            setData({
                                                ...data,
                                                id: props.task.id,
                                                content: props.task.content,
                                                linkedPage: props.task.linkedPage,
                                            })
                                        }
                                        data-toggle="modal"
                                        data-target="#exampleModalCenterViewss"
                                    >
                                        Edit
                                    </button>

请有人解释一下为什么状态没有正确更新。

Answer 1

首先，不要使用 var - 不好的做法。了解 var 和 let/const 之间的区别。 第二件事是你不需要写这一行：setData({...data})。 更新状态的正确方法是：

setData(prevData  => ({ ...prevData, 
                        id: props.task.id,
                        content: props.task.content,                         
                        linkedPage: props.task.linkedPage }))

功能组件中的setState可以接受一个回调函数而不是一条数据，因为它是异步工作的，并且要获取

previousData，你需要从这个回调函数中获取它。

Answer 2

你可以这样设置：

onClick={() => { 
    data.id = props.task.id;
    data.content = props.task.content;
    data.linkedPage = props.task.linkedPage;
    setData(data);
    }
}

你应该把它写成一个函数。这样会更清楚

function setOnClickFunction(){
    data.id = props.task.id;
    data.content = props.task.content;
    data.linkedPage = props.task.linkedPage;
    setData(data);
}
    
onClick={setOnClickFunction}