Titel umgeschrieben als: Variablen werden nicht aktualisiert, wenn der useState()-Hook verwendet wird

Question

Ich arbeite an einem sozialen Netzwerkprojekt mit React.

Ich möchte eine Komponente von einer Klassenkomponente in eine Funktionskomponente ersetzen und Hooks verwenden, dann entsteht ein globales Problem:

Wenn ich zu einem neuen Benutzer wechsle, zeigt die Seite den Status des vorherigen Benutzers an

Ich habe den useState()-Hook verwendet und alles debuggt, aber aus irgendeinem Grund wird eine neue Zustandskomponente beim Rendern nicht aktualisiert

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

Ich dachte, das Problem sei, dass die Containerkomponente immer noch eine Klassenkomponente sei, aber nach dem Wiederherstellen hat sich nichts geändert.

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