React update state on props change
問題 今天在研究 React 遇到一個問題 當我從外面更新 props 的時候 component 內的 state 不會更新 function Input(props){ const [text, setText] = React.useState(props.text); return ( <input type="text" value={text}> ) } 如同上面程式，第二行的 useState 不會隨著 props 更新而更新 解法 後來找到解法，加上一個 useEffect 監聽 props.text 然後更新 state 就好了 function Input(props){ const [text, setText] = React.useState(props.text); React.useEffect(() => { setText(props.text); }, [props.text]); return ( <input type="text" value={text}> ) } 如此一來 state 就會和 props 同步了 參考資料 https://stackoverflow.com/questions/54865764/react-usestate-does-not-reload-state-from-props https://zh-hant.reactjs.org/docs/hooks-effect.html