如何在React中不使用Redux实现无关函数组件间数据传递？

问题分析 #

你的代码存在几个核心问题导致数据无法同步：

• CompA内部维护独立状态：你在CompA里单独声明了useState，没有使用App组件传递的setName和value props，输入内容只在CompA内部生效，无法同步到父组件状态。
• CompB冗余代码导致异常：
  • 无需导入CompA，属于无效依赖
  • useEffect会触发无限循环：每次App的name更新，CompB就调用setName(name)，再次触发App状态更新，循环往复
  • 直接使用props中的name即可展示，不需要额外处理

修正后的完整代码 #

App.js

import CompA from "./CompA";
import CompB from "./CompB";
import "./styles.css";
import { useState } from 'react'

function App() {
  const [name, setName] = useState('first')

  return (
    <div className="App">
      <CompA setName={setName} value={name}/>
      <CompB name={name}/>
    </div>
  );
};
export default App;

CompA.js

import React from 'react';

const CompA = ({ setName, value })=>{
  const handleSubmit = (e)=>{
    e.preventDefault()
    // 如需提交校验等额外逻辑，可在此添加
  }
  return(
    <div>
      <h5>Component A</h5>
      <div>{value}</div>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={value} // 绑定父组件状态，实现受控组件
          onChange={(e)=>setName(e.target.value)} // 调用父组件方法更新全局状态
        />
        <button type="submit">提交</button>
      </form>
    </div>
  )
}

export default CompA;

CompB.js

import React from 'react';

const CompB = ({ name })=>{
  return(
    <div>
      <h5>用户输入内容：{name}</h5>
    </div>
  )
}

export default CompB;

关键改动说明 #

1. CompA改为受控组件：使用父组件传递的value作为输入框的值，onChange时调用父组件的setName更新全局状态，确保输入内容同步到App的name中。
2. 清理CompB冗余代码：删除无效的CompA导入和引发循环的useEffect，直接接收name props并展示。
3. 简化提交逻辑：移除按钮上重复的onClick绑定，表单的onSubmit已能阻止默认跳转行为。

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