React如何将跨文件子组件的useState状态传递给父组件？

这是React开发中最常见的状态提升场景：当父组件需要使用子组件内部产生的状态值时，要把对应状态的定义上移到父组件维护，再通过props把更新状态的回调方法传给子组件，子组件触发用户操作时调用回调，就能把值同步回父组件。
你现有代码已经在父组件Home中定义了stateChoice状态和对应的setStateChoice更新方法，只需要做两处修改即可实现需求：

• 第一步：调整父组件传参，除了状态值，把状态更新方法也传给子组件
• 第二步：调整子组件逻辑，删除内部重复的选中状态，接收父组件传入的回调，修正下拉点击事件的绑定位置

修改后的父组件（Home）代码 #

import React, { useContext, useState } from 'react'
import RenderJson from '../components/RenderJson';
import StateSearch from '../components/StateSearch';
import { AuthContext } from '../providers/AuthProvider';

const Home =  () => {
  const [stateChoice, setStateChoice] = useState('')
  const auth = useContext(AuthContext)
  console.log('用户选中的州：', stateChoice)
  return(
    <div>
      <h1>Welcome!</h1>
      <h2> Hey there! Glad to see you. Please login to save a route to your prefered locations, or use the finder below to search for your State</h2>
      {/* 传入选中值、更新方法两个props */}
      <StateSearch selectedState={stateChoice} onStateSelect={setStateChoice} />
    </div>
  )
};

export default Home;

修改后的子组件（StateSearch）代码 #

注意你原来的代码有个逻辑问题：把点击事件绑在了外层DropdownButton上，根本拿不到用户点击的具体选项值，要把事件绑在每个下拉选项Dropdown.Item上。

import React, { useEffect, useState } from 'react'
import {DropdownButton, Dropdown} from 'react-bootstrap';
import axios from 'axios';
// 接收父组件传入的props
const StateSearch = ({selectedState, onStateSelect}) =>{
    // 下拉选项列表只在子组件内使用，保留本地状态即可
    const [states, setStates] = useState([])
    // 删除子组件内部重复定义的stateChoice状态，统一由父组件维护

    useEffect (()=>{
        getStates();
    },[])

    const getStates = async () => {
        let response = await axios.get('/states')
        setStates(response.data)
    }

    const populateDropdown = () => {
         return states.map((s)=>{
            return (
                 <Dropdown.Item 
                    as="button" 
                    key={s.name}
                    // 点击选项时调用父组件传入的回调，把选中值传回父组件
                    onClick={() => onStateSelect(s.name)}
                 >
                    {s.name}
                 </Dropdown.Item>
             )
         })
    }

    return (
        <div>
            <DropdownButton
             id="state-dropdown-menu" 
             // 按钮标题动态显示当前选中值，未选择时显示默认提示
             title={selectedState || "States"}
             >
                {populateDropdown()}
            </DropdownButton>
        </div>
    )
}

export default StateSearch; 

原代码问题说明 #

1. 父子组件各自定义了独立的stateChoice状态，两者完全不互通，子组件更新自己的状态时父组件感知不到
2. 下拉点击事件绑定位置错误，绑定在外层按钮上无法获取用户选择的具体选项值
3. 子组件没有接收父组件传递的状态更新回调，没有建立子到父的传值通道

这种模式是React单向数据流的标准实现，不需要引入额外的状态管理库，就能实现父子组件的状态同步。

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