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

2020-July-12 · 1 分鐘 · simbafs

webpack-react

前言 最近開始想學 react 在這之前當然要先把開發環境搞好 其中 react 最重要的就是 webpack 和 babel 了 babel 負責編譯 webpack 負責串街所有工作 安裝套件 建立一個專案並初始化 mkdir react-test cd react-test npm init -y git init -y 安裝開發用套件 npm i -D \ @babel/core \ @babel/cli \ @babel/preset-env \ @babel/preset-react \ babel-loader \ react \ react-dom \ webpack package.json 加入以下的 script { "dev": "webpack --mode development", "watch": "webpack --mode development --watch", "depoly": "webpack --mode production" } webpack.config.js 建立 webpack.config.js 這是最小的版本了 沒有任何的擴充...

2020-June-28 · 1 分鐘 · simbafs