標題重寫為：使用useState()鉤子時，變數沒有更新的問題

Question

我正在使用React做一個社交網路專案。

我想將一個元件從類別元件替換為函數元件並使用hooks，然後出現了一個全域問題：

當我切換到一個新使用者時，頁面顯示的是上一個使用者的狀態

我使用了useState() hook，偵錯了所有的東西，但出於某種原因，當一個新的狀態元件被渲染時，它不會更新

const ProfileStatus = (props) => {
  const [edditMode, setEdditMode] = useState(false);
  const [status, setValue] = useState(props.status || "Empty");

  const onInputChange = (e) => {
    setValue(e.target.value);
  };
  const activateMode = () => {
    setEdditMode(true);
  };
  const deactivateMode = () => {
    setEdditMode(false);
    props.updateUserStatus(status);
  };

我以為問題是容器元件仍然是類別元件，但是重新做了之後，什麼都沒有改變。

Answer 1

一種解決方法是使用useEffect鉤子來在屬性變更時觸發更新。您可以使用該鉤子來比較目前屬性和先前屬性，然後在狀態中更新狀態。

根據您自己的程式碼，可以將此作為參考並進行調整。

const ProfileStatus = (props) => {
  const [edditMode, setEdditMode] = useState(false);
  const [status, setValue] = useState(props.status || "Empty");

  useEffect(() => {
    setValue(props.status || "Empty");
  }, [props.status]);

  const onInputChange = (e) => {
    setValue(e.target.value);
  };
  const activateMode = () => {
    setEdditMode(true);
  };
  const deactivateMode = () => {
    setEdditMode(false);
    props.updateUserStatus(status);
  };