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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
一种解决方法是使用
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); };