將更新的 state 從父母傳遞給孩子

Question

我用 boolean false 在我的父組件中創建了一個 let 變量。 我將該變量作為道具傳遞給子組件。 我通過父組件中的 function 將變量更改為 true。 我的問題是當我 console.log 之后子組件中 prop 的值仍然是 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);

我認為問題是 function 不等待 onChange 完成所以我讓它異步，但這並沒有解決問題

Answer 1

因為success不是state，只有改變state才會重新渲染組件。 嘗試

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

要將成功的值更改為 true，請執行

setState(true)

這應該可以解決您的問題