Tajuk ditulis semula sebagai: Pembolehubah tidak dikemas kini apabila menggunakan cangkuk useState().

Question

Saya sedang mengusahakan projek rangkaian sosial menggunakan React.

Saya ingin menggantikan komponen daripada komponen kelas kepada komponen fungsi dan menggunakan cangkuk, maka masalah global timbul:

Apabila saya bertukar kepada pengguna baharu, halaman tersebut menunjukkan status pengguna sebelumnya

Saya menggunakan cangkuk useState(), menyahpepijat semuanya, tetapi atas sebab tertentu apabila komponen keadaan baharu dipaparkan, ia tidak dikemas kini

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);
  };

Saya fikir masalahnya ialah komponen kontena masih merupakan komponen kelas, tetapi selepas dibuat semula, tiada apa yang berubah.

Answer 1

Satu penyelesaian ialah menggunakan useEffectcangkuk untuk mencetuskan kemas kini apabila sifat berubah. Anda boleh menggunakan cangkuk ini untuk membandingkan sifat semasa dan sebelumnya dan kemudian mengemas kini keadaan dalam keadaan.

Anda boleh menggunakan ini sebagai rujukan dan membuat pelarasan berdasarkan kod anda sendiri.

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);
  };