Javascript 将道具记录到子组件中会给出更新的值，而父组件中定义的状态本身仍然不会得到更新

我是React的初学者，遇到了一些问题。我有两个部分。一个是父组件（App.js），它将其状态传递给子组件（CardList）。另一个是接收传递状态并将其用作道具的子级。由于我已经在CardList中记录了profiles props的值，它给出了我在父组件（App.js）中定义的状态的更新值，而在父组件中定义的状态本身仍然没有得到更新。请参阅下面的屏幕截图：-

父组件**App.js** 从“React”导入React，{useState}； 从“./Form”导入表单； 从“/CardList”导入卡片列表； 导出默认函数App（）{ const[profiles，setProfiles]=useState（[]）； const addNewProfile=（profile）=>{ setProfiles（[…profiles，profile]）； 控制台日志（配置文件）； } 返回( ); }

子组件--**CardList.js**
从“React”导入React；
从“/Cardi”导入Cardi；
导出默认功能卡片列表（道具）
{
log（“父项更改的每次状态”）；
返回(
{props.profilese.map（profile=>）}
);
}

另一个子组件--**Form.js**
从“React”导入React，{useState}；
从“axios”导入axios；
从“再生器运行时”导入再生器运行时；
导出默认功能表单（道具）
{
const[username，setUsername]=useState（“”）；
const handleSubmit=async（事件）=>{
event.preventDefault（）；
试一试{
const resp=等待axios.get
(`https://api.github.com/users/${username}`）；
常数数据=等待响应数据；
道具添加配置文件（数据）；
}捕捉（错误）
{
console.log（“发生异常”+错误）；
}
}
返回(
{setUsername（event.target.value）}
/>
搜寻
);
}

**Cardi.js**
从“React”导入React；
导出默认功能Cardi（道具）
{
控制台日志（道具配置文件）；
if（props.profile==未定义）
{
返回(
找不到该用户名
);
}
否则{
返回(
{props.profile.name}
{props.profile.company}
);
}
}

如中所述，setState是异步的。 如果要查看更新状态，应将console.log置于addNewProfile函数之外：

const addNewProfile=(profile)=>{
  setProfiles([...profiles, profile]);
}
console.log(profiles); // this will be called each time state is modified by addNewProfile 

如果只想在更新配置文件时记录配置文件，可以使用useEffect：

可能重复的

Child Component -- **CardList.js**
import React from 'react';
import Cardi from './Cardi';

 export default function CardList(props)
{

   console.log("Everytime State of Parent change");
     return(
      <div>
         {props.profilese.map(profile => <Cardi key={profile.id} profile={profile}/>)}          
     </div>
       );
}

Another Child Component -- **Form.js**
import React,{useState} from 'react';
import axios from 'axios';
import regeneratorRuntime from "regenerator-runtime";

export default function Form(props)
{
    const[username,setUsername]=useState("");

   const handleSubmit=async(event)=>{
         event.preventDefault();
         try{
        const resp= await axios.get
         (`https://api.github.com/users/${username}`);
         const data=await resp.data;
          props.addProfile(data);
         }catch(err)
         {
             console.log("Exception Occured"+ err);
         }
    }
    return(
     <form  onSubmit={handleSubmit}>
        <input type="text"
         value={username}
         onChange={event=>
            {setUsername(event.target.value)}}

         />
         <button >Search</button>
     </form>
    );
}

**Cardi.js**
import React from 'react';


export default function Cardi(props)
{

console.log(props.profile);
if(props.profile===undefined)
{
    return (
       <div>Can't find that username</div>
    );
}
else{
return (


    <>
       <img src={props.profile.avatar_url}/>
       <div className="info">
      <div className="name">{props.profile.name}</div>
      <div className="company">{props.profile.company}</div>
    </div>
    </>

);
}
}

const addNewProfile=(profile)=>{
  setProfiles([...profiles, profile]);
}
console.log(profiles); // this will be called each time state is modified by addNewProfile 

const addNewProfile=(profile)=>{
  setProfiles([...profiles, profile]);
}
useEffect(() => { console.log(profiles) }, [profiles])