React.js -- 功能组件中的状态未更新

Question

我有一个功能组件，它带有一个名为“checked”的状态挂钩，它是一个用于复选框列表的布尔数组。单击复选框时，我有一个更新状态的事件处理程序，因此复选框将呈现一个复选框或一个空框。

根据我函数中的 console.logs，状态正在更新，但浏览器中的复选框没有响应，开发工具确认状态没有更新。如果我使用开发工具手动切换状态，则复选框可以正常工作，所以我认为这是状态未更新的问题。任何建议将不胜感激！

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

export default function MessengerCheckboxes() {
 const [checked, setChecked] = useState([false, false, false]);

...

 const handleChangeChild = (event) => {
   console.log('Currently state is: ' + checked); // Currently state is: [false, false, false]

   let index = parseInt(event.target.id.slice(0, 1));
   let localChecked = checked; //
   localChecked[index] = !checked[index];
    
   console.log('State should be: ' + localChecked); //State should be: [true, false, false] [[for example]]
   setChecked(localChecked);
    
   setTimeout(() => { // Added setTimeout for troubleshooting to make sure I wasn't calling state too quickly after setting it
       console.log('State is now: ' + checked); // State is now: [true, false, false] [[but won't trigger re-render and dev tools show state is [false, false, false]]
   }, 1 * 1000);
 };
}

Image of my console.log

Image of my dev tools

非常感谢您！

Answer 1

你不应该那样更新状态。

在这种情况下，需要稍微复杂一点的状态对象。我喜欢使用一个对象来保持列表中每个项目的状态。检查此 link：https://codesandbox.io/s/checkbox-state-https-Whosebug-com-questions-69680938-react-js-state-not-updating-in-functional-component-di0dd

import "./styles.css";
import { useState } from "react";

export default function App() {
  // 1.
  const stateObj = {
    cb1: false,
    cb2: false,
    cb3: false
  };
  const [cbState, setCbState] = useState(stateObj);
  const handleCb = (event) => {
    console.log(event.target.name, event.target.checked);
    // 4.
    setCbState({ ...cbState, [event.target.name]: event.target.checked });
  };
  return (
    <div>
      <input
        type="checkbox"
        name="cb1" // 2.
        onChange={handleCb}
        value={cbState["cb1"]} // 3.
      />
      <input
        type="checkbox"
        name="cb2"
        onChange={handleCb}
        value={cbState["cb2"]}
      />
      <input
        type="checkbox"
        name="cb3"
        onChange={handleCb}
        value={cbState["cb3"]}
      />
    </div>
  );
}

所以对于外卖，步骤为：

create/prepare 状态对象 - 键将用作 html 元素的名称
为 html 元素设置名称属性 - 使用与 1.
为 html 元素设置值属性 - 使用 state['key'] 的括号表示法。这就是您实现 controlled components
以保持现有 data/values (using spread operator) + update (bracket notation for accessing the properties) 的方式设置状态。在本例中，我们使用事件 name 和 checked 属性实现它。

Answer 2

好吧，您应该已经阅读了您不应该改变状态的评论。所以为了处理这种情况，我通常这样做：-

setChecked(data => ({
      ...data,
      [ind]: !checked[ind]
}))

P.S。 - 一定要阅读处理状态的不同方法，它会在更长的时间内帮助你很多运行。 :)

React.js -- 功能组件中的状态未更新

React.js -- state not updating in functional component

reactjs

react-hooks

state

react-state