javascript - react useContext 不触发重新渲染

Question

我在子组件中有一个按钮 AddMore.js它在列表中添加了更多项目，但它不会重新呈现呈现该列表的其他子组件 Pig.js .我认为我的设置会起作用，因为我使用 NextJS 框架以类似的方式设置了上下文和提供程序。 Here's the source code, using codesandbox ，或者你可以看看下面的代码。

应用程序.js

import React, { useState } from "react";

import "./App.css";

import PigContext from "./store/PigContext";

import Pig from "./Pig";
import AddMore from "./AddMore";

function App() {
  const [data, setData] = useState([
    { pig: "oink" },
    { pig: "bork" },
    { pig: "oinkoink" }
  ]);

  return (
    <div className="App">
      <header className="App-header">
        <PigContext.Provider value={{ data, setData }}>
          <Pig />
          <AddMore />
        </PigContext.Provider>
      </header>
    </div>
  );
}

export default App;

pig 上下文.js

import { createContext } from "react";

const PigContext = createContext(undefined);

export default PigContext;

pig .js

import React, { useContext } from "react";

import PigContext from "./store/PigContext";

const Pig = () => {
  const { data } = useContext(PigContext);

  return (
    <div>
      {data.map(({ pig }, idx) => (
        <div key={idx}>{pig}</div>
      ))}
    </div>
  );
};

export default Pig;

添加更多.js

import React, { useContext } from "react";
import PigContext from "./store/PigContext";

export default function AddMore() {
  const { setData } = useContext(PigContext);

  return (
    <div>
      <button
        onClick={() =>
          setData(prev => {
            prev.push({ pig: "zoink" });
            console.log(prev);
            return prev;
          })
        }
      >
        add pig question
      </button>
    </div>
  );
}

Answer 1

您正在通过调用 push 来改变状态对象，您应该返回一个新数组，以便更新组件。

添加更多.js:

...
  <button
    onClick={() =>
      setData(prev => (
        [...prev, ({ pig: "zoink" })]
      ))
    }
  >
...