React中如何正确实现子组件间变量传递及报错排查

核心错误原因 #

1. props传递与解构不匹配：App组件给ToolbarElement传递的是props={state}，但子组件里解构的是const { state } = props，导致state为undefined，直接赋值state.graph_data触发报错。
2. 非响应式状态管理：App里的state是普通JS对象，不是React响应式状态，就算修改也不会触发组件重新渲染，GraphElement无法更新显示。
3. 异步逻辑错误：fetch是异步操作，在fetch外部直接访问data.lst[0]时，API请求还未完成，此时data还是初始空数组；且直接修改父组件对象违背了React单向数据流规则。

修复后的代码 #

App.js #

用React的useState创建响应式状态，传递更新函数给子组件：

import { useState } from 'react';
import ToolbarElement from './ToolbarElement';
import GraphElement from './GraphElement';

function App() {
  const [graphData, setGraphData] = useState(0);

  return (
    <div className="App">
      <div className="App-body">
        <div className="toolbar-element" style={{ top: "50px", left: "0px" }}>
          <ToolbarElement setGraphData={setGraphData} />
        </div>
        <div className="graph-element" style={{ top: "50px", right: "0px" }}>
          <GraphElement graphData={graphData} />
        </div>
      </div>
    </div >
  );
}
export default App;

ToolbarElement.js #

接收父组件的状态更新函数，在fetch回调中获取数据后更新父组件状态：

import { useState } from 'react';

function ToolbarElement({ setGraphData }) {
  const [data, setData] = useState({ lst: [] });

  const handleButtonClick = () => {
    console.log('Button clicked!');
    fetch("/data")
      .then(res => res.json())
      .then(fetchedData => {
        setData({ lst: fetchedData });
        // 确保数据存在时再赋值
        if (fetchedData.length > 0) {
          setGraphData(fetchedData[0]);
        }
      })
      .catch(err => console.error('请求失败:', err));
  };

  return (
    <div style={{ height: '33.33%', backgroundColor: '#F0F0F0' }}>
      <button onClick={handleButtonClick}>Click me!</button>
    </div>
  );
}
export default ToolbarElement;

GraphElement.js #

直接接收graphData props并渲染：

function GraphElement({ graphData }) {
  return (
    <div style={{ height: '33.33%', backgroundColor: '#E8E8E8' }}>
      <p>{graphData}</p>
    </div>
  );
}
export default GraphElement;

关键修复点说明 #

• 用useState替代普通对象管理状态，保证状态变化能触发组件重新渲染。
• 通过回调函数setGraphData实现子组件向父组件传递数据，符合React单向数据流原则。
• 将状态更新逻辑放在fetch异步回调中，确保拿到API返回数据后再处理。
• 增加错误捕获，避免请求失败导致页面异常。

内容的提问来源于stack exchange，提问作者Mich