如何在React中实现父组件向子组件NAV传递动态输入值？

• 状态更新逻辑不规范：React 的 useState Hook 更新对象类型状态时不会自动合并原有属性，你当前的更新写法会直接用仅包含当前输入字段的新对象覆盖原有状态，一旦出现输入字段name属性拼写不一致、后续新增其他输入字段的情况，就会导致inputField.first_name丢失变为 undefined。
• 需确认 NAV 组件 prop 接收正确性：React 组件 prop 严格区分大小写，需要确认 NAV 组件内接收的 prop 名称和你传递的genomename完全一致，无拼写或大小写错误。

import React from "react";
import { useState } from "react";
import './App.css';
import Header from "./components/pages/Header";
import NAV from "./NAV";
import Trees from "./components/tree";


function App() {
  const [inputField , setInputField] = useState({
    first_name: 'Phyag_NZFS3770'
  })
   
  // 核心修改：使用函数式更新+扩展运算符保留原有状态属性
  const inputsHandler = (e) =>{
    setInputField(prevState => ({
      ...prevState,
      [e.target.name]: e.target.value
    }))
  }

  const submitButton = () =>{
    alert(inputField.first_name)
  }

  return(
    <div className="App">
      <NAV genomename={inputField.first_name}/>
      <Header title="EumicrobeDB"/>
      <h3 style={{ textAlign:"left" }}> Organism List </h3>  
      <div> <Trees /> </div>
      <div>
        <input 
          type="text" 
          name="first_name" 
          onChange={inputsHandler} 
          placeholder="enter the organism id" 
          value={inputField.first_name}
        />
        <button onClick={submitButton}>Submit Now</button> 
      </div>
    </div>
  )  
} 
export default App;

如果修改后还是提示genomename为undefined，请检查NAV组件的prop接收代码，示例正确接收写法如下：

// 写法1：解构接收
function NAV({genomename}) {
  console.log(genomename) // 正常取值
  // 组件逻辑
}

// 写法2：props对象接收
function NAV(props) {
  console.log(props.genomename) // 正常取值
  // 组件逻辑
}

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