在 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 發生變化。