javascript - 在 usestate hook 中更新状态后，React 不会更改状态(以自定义函数形式)

Question

我在react 16.10.2中使用usestate hook，但是在usetate hook中使用自定义函数更新初始状态后，react不会触发重新渲染(OtherComponent未渲染)，这是我的react组件:

import React, { useState, useEffect } from 'react';
import OtherComponent from "./OtherComponent";

function Component(props) {

   const [render, setRender] = useState({0:false, 1:false});
   const display_data = (index) => {
      setRender((prevState) => {
         prevState[index] = !prevState[index];
         return prevState;
      });
   };

   return (
      <>
         {{custom_json_array}.map((record, index) => {
            return (
                  <div>{teacher_render[index] ? 'true' : 'false'}</div>
                  <button onClick={() => display_data(index)}>change state</button>
                  {render[index] ? <OtherComponent /> : ''}
               </div>)
         })}
      </>
   );

}

但奇怪的是，如果我从钩子(Hook)更新器函数返回 {...prevState} ，一切正常并触发重新渲染! 我完全困惑了，为什么 React 会这样？!

Answer 1

我认为问题是您正在改变 render？

<button 
  onClick={() => setRender({ ...render, [index]: !render[index] })}
>
  change state
</button>

在此示例中，单击名称可查看自定义组件，再次单击可隐藏

https://codesandbox.io/s/dark-wind-3310q

const CustomComponent = () => (
  <div style={{ marginLeft: 10, background: "red" }}>I'm Selected!</div>
);

function App() {
  const [people] = useState([
    { id: 0, name: "Mario" },
    { id: 1, name: "Luigi" },
    { id: 2, name: "Peach" }
  ]);

  const [selected, setSelected] = useState({});

  return (
    <div>
      {people.map(({ id, name }) => (
        <div
          style={{ display: "flex", cursor: "pointer" }}
          key={id}
          onClick={() => setSelected({ ...selected, [id]: !selected[id] })}
        >
          {name}
          {selected[id] && <CustomComponent />}
        </div>
      ))}
    </div>
  );
}

这是您发布的错误代码的简化示例，以显示没有发生更新:

https://codesandbox.io/s/goofy-williamson-22fgs

function App() {
  const [obj, setObj] = useState({ name: "Mario" });
  const change = () => {
    // The following commented code will display no change
    // obj.name = "Peach";
    // setObj(obj);
    setObj({ ...obj, name: "Peach" });
  };
  return (
    <div className="App">
      <div>{obj.name}</div>
      <button onClick={change}>Change!</button>
    </div>
  );
}