React子组件修改父组件state异常：点击搜索项无法显示图表

你的代码核心问题是子组件接收Props的方式错误，导致状态无法正确传递和更新，具体问题及修复如下：

1. Api组件的Props解构错误 #

React组件的Props是作为单个对象参数传入的，你错误地将showGraph拆成了第二个参数解构，导致无法获取到父组件传递的状态值：

错误写法：

const Api = ({ data: records }, { showGraph }) => { ... }

正确写法：

const Api = ({ data: records, showGraph }) => {
  return (
    <>
      {showGraph ? (
        <div>
          <div className="show">
            <Areachart width="50%" height={400}>
              ...
            </Areachart>
          </div>
        </div>
      ) : null}
    </>
  );
};

2. Search组件的Props解构错误 #

同样的问题，你把setShowGraph放到了第二个参数里，导致点击搜索项时无法调用父组件的状态更新方法：

错误写法：

const Search = ({ setData }, { setShowGraph }) => { ... }

正确写法：

const Search = ({ setData, setShowGraph }) => {
  // 确保searchTerm已通过useState等方式正确定义
  return (
    <>
      {searchTerm.length !== 0 && (
        <div className="dataResult">
          {searchTerm.map((record, key) => {
            return (
              <h3
                key={key}
                onClick={() => {
                  setShowGraph(true);
                }}
              >
                {record.symbol}
              </h3>
            );
          })}
        </div>
      )}
    </>
  );
};

额外注意点 #

• 确保Search组件内的searchTerm已通过useState声明并赋值，否则会出现变量未定义错误
• 条件渲染中用null替代false更符合React规范，语义更清晰

修复后，点击搜索项时setShowGraph(true)会正确更新父组件的showGraph状态，Api组件就能根据状态切换显示图表了。

内容的提问来源于stack exchange，提问作者Kazi Arifin Islam