在 child 组件中记录 Props 会给出更新的值，而在 parent 中定义的状态本身仍然没有更新

Question

我是 React 的初学者，遇到了一些问题。我有两个组成部分。一个是 parent(App.js)，它将其状态传递给 child 组件（CardList）。另一个是 child ，它接收传递的状态并将其用作道具。因为我已经在 CardList 中记录了配置文件道具的值，所以它提供了我在 Parent 组件（App.js）中定义的状态的更新值，而在 parent 中定义的状态本身仍然没有得到更新。请参考以下截图：-

Parent Component **App.js**
import React, { useState } from 'react';
import Form from './Form';
import CardList from './CardList';

export default function App() {
      const [profiles, setProfiles] = useState([]);
      const addNewProfile=(profile)=>{
      setProfiles([...profiles, profile]);
      console.log(profiles);
  }
  return (
    <>

  <Form addProfile={addNewProfile}/>
  <CardList profilese={profiles}/>
</>
  );
}

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>
    </>

);
}
}

Answer 1

如中所述，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:

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

在 child 组件中记录 Props 会给出更新的值，而在 parent 中定义的状态本身仍然没有更新

Logging the Props in child component gives the updated value whereas state itself defined in the parent still not gets updated

javascript

async-await

reactjs

react-functional-component