使用扩展语法将数据添加到响应状态，但第一个选择不会在 selectedData 状态 [duplicate] 上更新

Adding data to react state using spread syntax but the first select does not update on selectedData state [duplicate]

提问人：etranz 提问时间：11/18/2023 最后编辑：Drew Reeseetranz 更新时间：11/18/2023 访问量：45

问：

2天前关闭。

我正在使用 React 构建我的前端。我希望当用户选择银行时，它将被添加到状态中，但它没有按预期工作。当用户第一次选择银行时，它不会添加到状态中，但如果用户第二次选择，则会将其添加到状态中。selectDataselectedData

import React, { useState } from 'react'

export const terr = () => {
    const [selectedData, setSelectedData] = useState({})
    const onChange = (value) => {
        console.log(`selected ${value}`);

        setSelectedData({
            ...selectedData,
            "bank_code": value
        });
        console.log(`selected data ${selectedData}`);
    };
    return (
        <div>
            <Form.Item
                label="Bank Name"
                name="bank_code"
                rules={[
                    {
                        required: true,
                        message: 'Select your bank name!',
                    },
                ]}
            >
                <Select
                    showSearch
                    placeholder="Select a Bank"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={filterOption}
                    options={banks}
                />
            </Form.Item>
        </div>
    )
}

reactjs 反应钩子

0赞 Drew Reese 11/18/2023

React 状态更新是异步处理的，因此您永远不能将状态更新排入队列，并期望从相同的回调范围对其进行控制台记录。两者之间必须至少发生一个 React 组件渲染周期。别担心，状态已更新，您只是错误地验证了它。但请注意，更建议使用功能状态更新，例如因此，状态是从以前的状态值正确更新的，而不是回调作用域中可能关闭的任何状态值。setSelectedData(selectedData => ({ ...selectedData, "bank_code": value }));

答：

0赞 fairjam4 11/18/2023 #1

在 React 中，setState 函数在下一次渲染之前不会更新状态。若要立即更新它，可以在 setSelectedData 函数中使用回调。

setSelectedData(oldData => ({
  ...oldData,
  "bank_code": value
}));

0赞 Caleth 11/18/2023 #2

在中，绑定到的对象不会更改。取而代之的是，react 将重新渲染，这将看到你传递给的新对象，并且你将有一个新的对象将关闭它。如您所见，调用该命令时，将看到修改后的 .onChangeselectedDataterrsetSelectedDataonChangeonChangeselectedData

如果要观察该对象，请在将其传递给之前为其命名。setSelectedData

const onChange = (value) => {
    console.log(`selected ${value}`);

    const data = {
        ...selectedData,
        "bank_code": value
    };
    setSelectedData(data);
    console.log(`selected data ${data}`);
};

0赞 Artyom Ganev 11/18/2023 #3

看起来您正在使用 Ant Design。应将的属性传递给。https://ant.design/components/select#select-propsselectedDatavalueSelect

P.S. 最好用钩子包装，以避免不必要的组件重新渲染。onChangeuseCallbackSelect

上一个：导入自定义 Lit 包

下一个：Next.js 13 及更高版本中 NextAuth 的挑战 - 寻求见解 [已结束]

使用扩展语法将数据添加到响应状态，但第一个选择不会在 selectedData 状态 [duplicate] 上更新

Adding data to react state using spread syntax but the first select does not update on selectedData state [duplicate]

评论