搜尋

首頁  >  問答  >  主體

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

我正在使用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);
  };

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

P粉066224086P粉066224086522 天前625

全部回覆(1)我來回復

  • P粉674876385

    P粉6748763852023-09-11 17:31:34

    一種解決方法是使用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);
      };

    回覆
    0
  • 取消回覆