将更新的状态从父母传递给孩子

Question

我在我的父组件中创建了一个带有布尔值 false 的 let 变量。我将该变量作为道具传递给子组件。我通过父组件中的函数将变量更改为 true。 我的问题是子组件中prop的值在我console.log之后仍然是false。

家长：

function App() {
 
  let success = false
  
 
  const changePW = async ({password, repeatPW}) => {


    success = true
    console.log(`Success App0: ${success}`)
    console.log('ChangePW')

  return (
    <BrowserRouter>
    <div className="container">
      <Header/>
      <Route path='/' exact render={(props) => (
        <>
          <AddPasswort onChange = {changePW} success = {success}/>
          <Footer />
        </>
       )}/>
       
      <Route path='/about' component={About} />
      
      <Route path='/success' component={Success} />
      <Route path='/error' component={Error} />
      
      
      </div>
    </BrowserRouter>
  
  );
}

export default App;

孩子

const AddPasswort = ({onChange,success}) => {
    const[password, setPassword] = useState('')
    const[repeatPW, setRepeatPW] = useState('')
    
    // create a history object 
    const history = useHistory()  
   

    const onSubmit = async (e) => {
        e.preventDefault();

     
            await onChange({password, repeatPW})
            console.log(success)
            // navigate to the success page 
            if (success){
                console.log('success')
                history.push("/success")
            }
            else{
                console.log('error')
                history.push("/error")
            }    
        }


    }
    ...
   
}

export default withRouter(AddPasswort);

我认为问题在于该函数没有等待 onChange 完成，所以我将其设为异步，但这并没有解决问题

Answer 1

因为成功不是一种状态， 只有改变状态才会重新渲染组件。 试试

const [success, setSuccess] = useState(false);

要将 success 的值更改为 true ，请执行

setState(true)

这应该可以解决您的问题