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);
 };
}

我的控制台的图像。日志

我的开发工具的图像

提前向你表示衷心的感谢！

Answer 1

好吧，你应该读到那些评论，你不应该改变国家。所以为了处理这种情况，我通常会这样做：-

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

Answer 2

你不应该像那样更新状态。

在这种情况下，需要更复杂的状态对象。我喜欢使用对象来保持列表中每个项目的状态。检查此链接：https://codesandbox.io/s/checkbox-state-https-stackoverflow-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>
  );
}

因此，对于外卖，分步骤进行：

1. 创建/准备状态对象-键将用作html元素的名称
2. 为html元素设置名称属性-使用1中的相同键
3. 使用状态['key']设置html元素的值属性-括号表示法。这就是实现受控组件的方法
4. 设置状态的方式是保存现有数据/值（使用扩展运算符）更新（用于访问属性的括号符号）。在本例中，我们使用事件name和checked属性来实现它