React-使用道具時重新渲染太多

我一直在做一個專案，我在螢屏上展示一個圖表。現在，dataApp.js 中的狀態作為 prop 傳遞，然后導致infinite loop error.

如果資料變數在 Graph.js 檔案中并在 中使用和定義useState，則沒有問題。

我有點不確定為什么會發生這種情況，因為我對 react 和 javascript 比較陌生。

目標是將資料添加到圖表中，它會加載，然后當我更改App.js檔案中的資料時，頁面將自動使用新資料再次加載。

任何幫助/建議將不勝感激:)

應用程式.js

function App() {
  const [data, setData] = useState(null)
  setData(
    {
    nodes:[
        {name:"Max"},
        {name:"George"},
        {name:"Jesus"},
        {name:"Ben"},
        {name:"James"},
        {name:"Sam"},
        {name:"Sassms"}
    ],

    edges:[
        {source:"Max", target:"George"},
        {source:"George", target:"Jesus"},
        {source:"Jesus", target:"Max"},
        {source:"Jesus", target:"Ben"},
        {source:"James", target:"Ben"},
        {source:"Sam", target:"Sassms"},
        {source:"Sam", target:"Ben"}
    ]
    })
    console.log(data)

  return (
    <Graph colour="Grey" data={data} setData={setData}/>
  );
}

圖.js

function Graph(props) {
    const svgRef = useRef(null);
    useEffect(
        () => {
            let svg = d3.select(svgRef.current)
            if(svgRef.current) {// Check that svg element has been rendered
                let width = svg.attr("width")
                let height = svg.attr("height")

                d3.selectAll("svg > *").remove();

                let edge = svg
                    .append("g")
                    .selectAll("line")
                    .data(props.data.edges)
                    .enter()
                    .append("line")
                    .attr("stroke-width", function(d) {
                        return 3;
                    })
                    .style("stroke", "black")

                let node = svg
                    .append("g")
                    .selectAll("circle")
                    .data(props.data.nodes)
                    .enter()
                    .append("circle")
                    .attr("r", 7)
                    .attr("fill", function(d) {
                        return "grey";
                    })
                    .attr("stroke", "black")
            }

    }, [props.data])

    
    return (
        <svg ref={svgRef} id="svgID" width="1000" height="900"></svg>
    )
  }

uj5u.com熱心網友回復：

這是因為您一次又一次地更新每次渲染的狀態。如果你只是簡單地setData()在函式內部呼叫，它會呼叫這個呼叫重新渲染并觸發 ReactApp再次呼叫你的函式的setter 。

如果你想有一個默認狀態，你可以像下面那樣做。如果要更新狀態，則應通過其他操作來完成，例如單擊按鈕、獲取一些資料等。

查看下面的演示，我添加了一個按鈕，為您的nodes 陣列添加新名稱：

function App() {
  const [data, setData] = React.useState({
    nodes: [
      { name: 'Max' },
      { name: 'George' },
      { name: 'Jesus' },
      { name: 'Ben' },
      { name: 'James' },
      { name: 'Sam' },
      { name: 'Sassms' },
    ],
    edges: [
      { source: 'Max', target: 'George' },
      { source: 'George', target: 'Jesus' },
      { source: 'Jesus', target: 'Max' },
      { source: 'Jesus', target: 'Ben' },
      { source: 'James', target: 'Ben' },
      { source: 'Sam', target: 'Sassms' },
      { source: 'Sam', target: 'Ben' },
    ],
  });

  return <Graph colour="Grey" data={data} setData={setData} />;
}

function Graph(props) {
  function addRandomName() {
    props.setData({
      ...props.data,
      nodes: [
        ...props.data.nodes,
        { name: Math.random().toString(36).slice(2) },
      ],
    });
  }

  return (
    <React.Fragment>
      <button onClick={addRandomName}>Add new name</button>
      <h2>Names</h2>
      <p> {props.data.nodes.map((d) => d.name).join(', ')}
      </p>
      <h2>State</h2>
      <pre>{JSON.stringify(props.data, null, 2)}</pre>
    </React.Fragment>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

標籤：javascript 反应 d3.js

上一篇：添加多個選擇陳述句而不使用UnionALL

下一篇：D3Sunburst-如何將自定義顏色映射到路徑