因此，我的界面是这样的，我有一个主屏幕组件，然后是一个用户列表和人员子组件...当我单击列表中的名称时，它会从主屏幕运行一个 prop 函数，并更新一个发送到人员组件的 prop 。我运行一个JS，并更新发送到人员组件的 prop ...图形中的人员详细信息框.....

下面是我的人员组成部分：

import { useState } from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from '@fortawesome/free-solid-svg-icons'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'

function People(props){
    //LINE 8
    console.log('Start People')
    console.log(props.userDet)
    console.log(props.userDet.FirstName)
    const users = props.userDet
    console.log('Users vairable')
    console.log(users.FirstName) //returns true
    console.log(props.userDet.hasOwnProperty('FirstName'))
    const [fName,setfName] = useState(users.FirstName || 'n')
    const [lName,setlName] = useState(users.LastName || 'n')
    console.log('fName')
    console.log(fName)
    console.log(props.userDet.FirstName)
    //LINE 21

    const handleChange = e => {
        console.log('handle change running')
        if(e.target.name === 'fName'){
            setfName(e.target.value)
        }
        else{
            setlName(e.target.value)
        }
        
      }

    function formatPhoneNumber(phoneNumberString) {
        var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
        var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
        if (match) {
          return '(' + match[1] + ') ' + match[2] + '-' + match[3];
        }
        return null;
    }

    

    var phoness = props.userDet.phones;
    //console.log('phoness');
    //console.log(phoness);
    const onephone = phoness.map((phone,index) =>

    <div className={(index % 2) ? 'greyBg'+ " phonehold" : 'noBg'+ " phonehold"}  id={"phone_"+phone.phone_id} >
        <div>{phone.phone_type}</div>
        <div>{formatPhoneNumber.call(this, phone.phone_number)}</div>
        <div><FontAwesomeIcon icon={faXmark}/></div>
        </div>)
    
    
    return (<div id="peopledets">
        
        <div id="peoinfo">
            <div id="peonames">
            <div className="header">Person Details</div>
    <div className="holder"><div className="formlabel">First Name:</div><div><input onChange={handleChange} name="fName" type="text" value={fName} /></div></div>
    <div className="holder"><div className="formlabel">Last Name:</div><div><input onChange={handleChange} name="lName" type="text" value={lName} /></div></div>
    </div>
        <div id="peophones">
        <div className="header">Person Phones<span style={{marginLeft:'5px',fontSize:'.8em'}}><FontAwesomeIcon icon={faPlusCircle}/></span></div>
        
        {onephone}
        </div>
    </div>
    </div>)

}

export default People;

返回的Javascript显示属性已设置，但我无法让它设置状态，因为它进入了输入字段，需要更新....不知道发生了什么或为什么状态没有更新.....
JAVASCRIPT控制台显示以下内容