React中如何通过Context API传递子组件输入框数据至父组件

两版方案没跑通全是细节bug，和传值思路本身没关系：

• 最初的prop透传方案的两个问题：
  1. React的setState是异步批处理机制，你在handleInputChange里刚执行setInputText(e.target.value)，下一行判断if (inputText === wallet.address)拿到的是上一次渲染的旧值，永远比用户输入慢一拍，根本匹配不上。
  2. 写的getWalletBalance方法根本没接收输入地址参数，上来就遍历所有测试钱包查余额，最后只会把列表最后一个钱包的余额赋值给state，和用户输入的地址完全没关系。
• 后面的Context方案报undefined、余额不更新的三个问题：
  1. 没把消费Context的组件包在<TransactionProvider>作用域里。你创建Context的时候没传默认值，组件在Provider外层调用useContext拿到的自然全是undefined，这是Context用错的最高频原因。
  2. 同样踩了setState异步的坑：setInputText(e.target.value)之后立刻拿旧的inputText做匹配，逻辑根本触发不了。
  3. 用了Formik的Field组件还强行传自定义value和onChange，这俩属性会被Formik内部的表单状态管理覆盖，你绑定的输入事件压根没执行。

两种传值思路都能用，简单场景直接传回调更轻量不容易出错，多组件共享状态再用Context。

方案1：父组件传回调给子组件（无Context，零依赖） #

先修正父组件Dashboard的逻辑，把查询方法改成接收地址参数，不要无差别遍历所有钱包：

const Dashboard = () => {
  const [walletBalance, setWalletBalance] = useState('');
  const classes = useStyles();

  const fetchWalletBalance = async (address) => {
    try {
      const web3 = new Web3(Web3.givenProvider || 'ws://localhost:3000');
      // 直接用web3内置方法校验地址合法性，不用硬匹配测试钱包列表
      if (!web3.utils.isAddress(address)) {
        setWalletBalance('');
        return;
      }
      const balance = await web3.eth.getBalance(address);
      const balanceEth = Web3.utils.fromWei(balance, 'ether');
      setWalletBalance(Number(balanceEth).toFixed(4));
    } catch (err) {
      console.error('查询余额失败:', err);
      setWalletBalance('');
    }
  };

  return (
    <>
      {/* 原有页面结构不变，把fetchWalletBalance作为prop逐层传给SearchInputForm即可，中间3层组件只需要透传这个prop */}
      <SearchInputForm 
        onAddressInput={fetchWalletBalance} 
        placeholdervalue="输入钱包地址查询余额" 
      />
      {/* 原有余额展示逻辑直接用walletBalance变量即可 */}
      <span className={classes.balanceNumber}>{walletBalance} ETH</span>
    </>
  )
}

再修正子组件SearchInputForm的逻辑，不要和Formik的内部状态冲突：

const SearchInputForm = ({ onAddressInput, placeholdervalue }) => {
  const classes = useStyles();

  return (
    <Formik
      initialValues={{ walletAddress: '' }}
      onSubmit={() => {}}
      render={({ setFieldValue }) => {
        const handleAddressChange = (e) => {
          const inputVal = e.target.value;
          setFieldValue('walletAddress', inputVal);
          // 直接拿当前输入值传给父组件，不要等state更新
          onAddressInput(inputVal);
        };

        return (
          <Form>
            <Grid container>
              {/* 原有图标、按钮等Grid结构不变，只修正Field部分 */}
              <Grid item xs={11}>
                <Field
                  required
                  name="walletAddress"
                  placeholder={placeholdervalue}
                  component={TextField}
                  onChange={handleAddressChange}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <Search fontSize="large" className={classes.searchIconStyle} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              {/* 其余结构不变 */}
            </Grid>
          </Form>
        )
      }}
    />
  )
}

方案2：修正后的Context方案（适合多层级共享状态） #

第一步必须先在应用最外层（比如App.jsx）把所有用到钱包状态的组件包裹在Provider内：

// App.jsx
import { TransactionProvider } from './shared/context/WalletContext';
import Dashboard from './pages/Dashboard';

function App() {
  return (
    <TransactionProvider>
      {/* 所有要消费WalletContext的组件必须放在Provider标签内部，放外层拿不到值 */}
      <Dashboard />
    </TransactionProvider>
  )
}

再修正WalletContext的逻辑，解决state异步问题：

export const WalletContext = createContext();

export const TransactionProvider = ({ children }) => {
  const [walletBalance, setWalletBalance] = useState('');
  const [inputAddress, setInputAddress] = useState('');

  const handleInputChange = async (e) => {
    // 直接拿事件对象里的当前输入值，不要等setState更新
    const currentInput = e.target.value.trim();
    setInputAddress(currentInput);

    if (!currentInput) {
      setWalletBalance('');
      return;
    }

    try {
      const web3 = new Web3(Web3.givenProvider || 'ws://localhost:3000');
      if (!web3.utils.isAddress(currentInput)) return;
      
      const balance = await web3.eth.getBalance(currentInput);
      const balanceEth = Web3.utils.fromWei(balance, 'ether');
      setWalletBalance(Number(balanceEth).toFixed(4));
    } catch (err) {
      console.error('查询失败:', err);
      setWalletBalance('');
    }
  };

  return (
    <WalletContext.Provider
      value={{ walletBalance, inputAddress, handleInputChange }}
    >
      {children}
    </WalletContext.Provider>
  )
}

子组件里只需要从Context拿handleInputChange绑定到输入框即可，注意不要给Field传自定义value属性覆盖Formik状态，父组件直接从Context拿walletBalance展示就可以。

• 记住React所有state更新都是异步批处理的，永远不要在调用setState之后，同一轮函数执行里立刻读这个state的值做判断，直接用e.target.value这类当前作用域里的现成值就行。
• 用Context必须保证：所有调用useContext拿值的组件，都是对应Provider标签的子节点，放外面100%拿不到有效值。
• 用Formik、React Hook Form这类表单库的时候，不要硬给表单组件传原生的value/onChange属性，会被库的内部状态覆盖，要走库提供的状态更新方法。

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