数据不会在 dom 中刷新

Question

我的 useState 有问题，当我在我的 useState 中更新我的数据时，我的渲染中的数据没有改变

我的使用状态：

 const [data,setData] = useState(question.choices.reduce((prev,cur) => {
        prev[cur.uuid] = {
            uuid: cur.uuid,
            checked:false,
            qte:0,
            choicePoint:cur.choicePoints,
            name:cur.name
        }
        return prev
    },{} as Record<string,ICheckBox>));

我用它来显示我的数据：

 question.choices && question.choices.map(e => (
                    <div key={e.uuid}>
                     <Checkbox key={e.uuid} checked={data[e.uuid].checked} onClick={() => {handleCheckBox(e)}}>{e.name}</Checkbox>
                    </div>
                ))

还有我的函数 HandleCheckBox ：

 const handleCheckBox = (choice:IChoice) =>{
        if(data[choice.uuid].checked == true){
            data[choice.uuid].checked = false;
        }else if((data[choice.uuid].checked == false)){
            data[choice.uuid].checked = true;
        }
    }

如果有人有想法，这个错误很奇怪我不明白为什么我的“选中”在我点击它时没有改变。

Answer 1

你正在改变你的状态。这是一个突变：

data[choice.uuid].checked = false;

你不应该改变你的状态，你应该提供一个新的状态并用你的状态设置器函数设置它。这就是为什么你有一个setData。

function handleCheckbox(choice) {
  setData((prev) => ({
    ...prev,
    [choice.uid]: {
      checked: !prev[choice.uid].checked,
    },
  }));
}

Answer 2

const handleCheckBox = (choice:IChoice) =>{
        setData((prev) => ({
            ...prev,
            [choice.uuid]: {
                checked: !prev[choice.uuid].checked,
            }
        } as Record<string,ICheckBox>));
      }

是正确的方法，谢谢 devserkan