重新渲染子组件（React with Hooks）答案

【问题标题】：Re-render a child component (React with Hooks)重新渲染子组件（React with Hooks）
【发布时间】：2020-07-07 07:06:45
【问题描述】：

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

有一个名为“datas”的钩子，它在“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

【问题讨论】：

我认为这可能会对您有所帮助：stackoverflow.com/questions/54843675/…
需要看看你是如何创建newArray它需要一个新的参考
代码在这里pastebin.com/aLzsz8md

标签： javascript reactjs

【解决方案1】：

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

挂钩 (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"]} />
);

【讨论】：

我看不出这里与 OP 有什么不同，除了你把它分成两个组件，加上 Graph 组件？

【解决方案2】：

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

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

【讨论】：

这就是我所做的，通过一些控制台日志，我清楚地看到数据值发生了变化，但子组件没有变化
你能把相关代码贴上来吗，从你发的内容看不清楚
这很奇怪，我正在做一些 setDatas(newDatas)，但是子组件总是在第一个 useState 中获取数据......不可能刷新它
你有 SimpleBarChart 看吗？
我的预感是您的shouldComponentUpdate 中的某些内容不正确。可能值得在那里调试一下 - 这是我唯一能看到的，虽然会阻止你的图表重新渲染，在你的 useEffect 日志中提供，你每次看到不同的数据，而不是相同的值

【解决方案3】：

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

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

【讨论】：