在 usestate 挂钩中更新 state 后，React 不会更改 state（以自定义 function 形式）

Question

我在 react 16.10.2 中使用 usestate 挂钩，但是在使用 usetate 挂钩中的自定义 function 更新初始 state 后，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>)
         })}
      </>
   );

}

但奇怪的是，如果我从钩子更新程序 function 返回 {...prevState}，一切正常并触发重新渲染，我完全糊涂了吗？ 为什么反应会这样？！

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

Answer 2

您的 onclick 处理程序在标记中称为display_teacher_data ，但在组件中称为display_data 。 将它们设置为相同，以便 state 发生变化。