Question

我有以下代码：

import React, { useState } from "react";

export default function App() {
  const [data, setData] = useState({});
  console.log(data);
  return (
    <div className="App">
      {JSON.stringify(data)}
      <Buttons data={data} setData={setData} />
    </div>
  );
}

var i = 0;
function Buttons({ data, setData }) {
  return (
    <>
      <button
        onClick={(ev) => {
          //console.log(data);
          setData({ [i]: true });
        }}
      >
        click up
      </button>
      <button
        onClick={(ev) => {
          delete data[i];
          setData(data);
        }}
      >
        click down
      </button>
    </>
  );
}

当页面第一次呈现时，它显示一个空对象。当我单击“单击”时，它显示 {"1":true}。但是，当我按下 click 时，页面仍然显示 {"1" : true}，即使我记录了数据，它也是一个空对象。为什么不重新渲染？

Answer 1

如果您先从对象中复制一份，那么您的方法是有效的：

const nextData = { ...data }
delete nextData[i];
setData(nextData);

如果您愿意，您也可以将您的 data 解构为：

const { [i]: removed, ...nextData } = data;
setData(nextData);

当状态为空对象时，React 不会重新渲染

1 个答案: