admin 管理员组

文章数量: 1086019

I have a parent ponent called "Causes", and a child ponent called "Graph",

There's a hook called "datas", that is created and updated in "Causes" (parent), and I pass it as props to "Graph" (child).

The first time, everything works, but when I update "datas" in "Causes" (parent), "Graph" (child) still has the old "datas" array of objects.

How can I force the re-render of the child ponent ?

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 ponent below always got the old datas
}, []);


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

Code available here :

I have a parent ponent called "Causes", and a child ponent called "Graph",

There's a hook called "datas", that is created and updated in "Causes" (parent), and I pass it as props to "Graph" (child).

The first time, everything works, but when I update "datas" in "Causes" (parent), "Graph" (child) still has the old "datas" array of objects.

How can I force the re-render of the child ponent ?

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 ponent below always got the old datas
}, []);


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

Code available here : https://pastebin./aLzsz8md

  • javascript
  • reactjs
Share Improve this question edited Mar 26, 2020 at 15:52 VersifiXion asked Mar 26, 2020 at 15:36 VersifiXionVersifiXion 2,2927 gold badges27 silver badges42 bronze badges 3
  • I think this might help you out: stackoverflow./questions/54843675/… – Maurice Pheyton Commented Mar 26, 2020 at 15:42
  • 1 need to see how you are creating newArray it needs to be a new reference – andy mccullough Commented Mar 26, 2020 at 15:44
  • code here pastebin./aLzsz8md – VersifiXion Commented Mar 26, 2020 at 15:54
Add a ment  | 

3 Answers 3

Reset to default 6

You can solve this problem by adding a key to the Graph ponent.

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

You do not need to force a render of your ponent, you just need to call setDatas() with some new data. Once you do that, it will rerender Graph with the new data. Make sure you are calling setDatas() with a new array, not just an updated version of the existing datas array, it needs to be a new object reference

At the minute, you are only calling it once, on mount, using the useEffect hook (with no dependencies, denoted by the empty dependency array)

you missed the return value on the hook. Please see this implementation.

Hook (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 };

Implementation (my-ponent.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"]} />
);

本文标签： javascriptRerender a child component (React with Hooks)Stack Overflow

版权声明：本文标题：javascript - Re-render a child component (React with Hooks) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744089516a2531767.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。