Question

我有一个名为“ Causes”的父组件，还有一个名为“ Graph”的子组件，

有一个名为“数据”的钩子，它在“原因”（父级）中创建和更新，我将其作为道具传递给“图形”（子级）。

第一次，一切正常，但是当我更新“原因”（父级）中的“数据”时，“图”（子级）仍然具有旧的“数据”对象数组。

如何强制重新渲染子组件？

const [datas, setDatas] = useState([
    { shop: "00h-8h", value: 250, color: "#A2AAC2" },
    { shop: "8h-12h", value: 420, color: "#A2AAC2" },
    { shop: "12h-16h", value: 500, color: "#A2AAC2" },
    { shop: "16h-20h", value: 80, color: "#A2AAC2" },
    { shop: "20h-00h", value: 80, color: "#A2AAC2" }
]);

useEffect(() => {
  setDatas(newArray); <- this updates data, but the component below always got the old datas
}, []);


return (
  <Graph
                  h={400}
                  w={900}
                  data={datas}
                  defaultKeys={["shop", "value"]}
  />
)

此处提供代码：https://pastebin.com/aLzsz8md

Answer 1

您可以通过向Graph组件添加键来解决此问题。

<Graph ... key={newKey} />

Answer 2

您不需要强制渲染组件，只需要用一些新数据调用setDatas()。完成此操作后，它将使用新数据重新渲染Graph。确保您使用的是新数组，而不只是现有setDatas()数组的更新版本，而调用datas，它需要是一个新的对象引用

此刻，您仅使用useEffect钩子在挂载时调用一次（没有依赖项，由空的依赖项数组表示）

Answer 3

您错过了挂钩上的返回值。请参阅此实现。

挂钩（updateGraph.js）

const UpdateGraph = () => {

    const [data, setData] = useState([]);

    const fetchData = async () => {
        setData([
            { shop: "00h-8h", value: 250, color: "#A2AAC2" },
            { shop: "8h-12h", value: 420, color: "#A2AAC2" },
            { shop: "12h-16h", value: 500, color: "#A2AAC2" },
            { shop: "16h-20h", value: 80, color: "#A2AAC2" },
            { shop: "20h-00h", value: 80, color: "#A2AAC2" }
        ]);
    };

    useEffect(() => {
        fetchData();
    }, []);

    return [data];

};

export { UpdateGraph };

实施（my-component.js）

const { UpdateGraph } from "./UpdateGraph.js" // your path...

const [datas] = UpdateGraph();

return (
    <Graph key={"graph_001"} 
           h={400} w={900} 
           data={datas} 
           defaultKeys={["shop", "value"]} />
);

重新渲染子组件（与挂钩反应）

3 个答案: