在反应中使用 setState 挂钩更改嵌套对象的值

Question

需要像切换一样将 isClicked 更改为 !isClicked。它为单击按钮呈现 JSX 样式。

我的数据：

const [isApply, setIsApply] = useState([
    {
        "0": {
            "isClicked": false,
            "isExpand": false,
            "uni": "NSBM"
        }
    },
    {
        "1": {
            "isClicked": false,
            "isExpand": false,
            "uni": "NSBM"
        }
    },
    {
        "2": {
            "isClicked": false,
            "isExpand": false,
            "uni": "SLIIT"
        }
    },
    {
        "3": {
            "isClicked": false,
            "isExpand": false,
            "uni": "SLIIT ACADEMY"
        }
    },
    {
        "4": {
            "isClicked": false,
            "isExpand": false,
            "uni": "NIBM"
        }
    },
    {
        "5": {
            "isClicked": false,
            "isExpand": false,
            "uni": "NIBM"
        }
    }
])

const apply = (e) => {
    console.log("clicked button id: ", e.currentTarget.id);
    console.log(isApply);
    setIsApply(...)
};

需要像切换一样更改 isClicked on click(!isClicked)。它为单击按钮呈现 jsx 样式。因为它是一个嵌套对象，并且对象键是使用按钮单击 ID 生成的，所以很难设置 isClicked 的状态需要帮助

Answer 1

我认为你在传播对象时做错了什么。你必须考虑 object spreading

当对象展开时，展开运算符的位置可能会影响您正在执行的操作。

✗错

{ isClicked: !state[key]?.isClicked, ...state[key] }

这里即使你正在更新 isClicked 值，它也不会影响对象，因为你在更新 isClicked 值之后添加 ...state[key]。它自己替换了原来的对象。

✔ 正确

{ ...state[key], isClicked: !state[key]?.isClicked }

在这里您可以通过添加 ...state[key] 然后更新该特定对象的 isClicked 值来放置当前状态。

Here is the working Example with React.

在反应中使用 setState 挂钩更改嵌套对象的值

change value of a nested object using setState hook in react

javascript

jsx

setstate

reactjs

react-hooks