使用两个使用效果反应钩子

Question

我尝试使用带有钩子的反应。我有这个状态：

const [state, setState] = useState<State>({
titel: "",
somethingElse: "",
tabledata: [],
});

我有两个用途：

// componentDidMount, Initial variable deklaration
useEffect(() => {
//Do something
//Set initial states
setState({
...state,
titel: props.titel,
somethingElse: props.somethingElse,
})
}, []);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
//Do something and generate tabledata
let tabledata ....
//Set tabledata
setState({
...state,
tabledata: tabledata,
})
}, [props.taenzer]);

现在我有第二个使用效果正在覆盖第一个使用效果setState命令的行为。 我的变量 titel 和 somethingElse 总是空的。

现在我可以改变我的状态分解，这样：

const [titel, setTitel] = useState<>({
titel = ""
});
const [somethingElse, setSomethingElse] = useState<>({
somethingElse = ""
});

但是这使得整体变得不清楚，并且像使用setState(...state， titel="Hello"， somethingElse="Else"(

还有其他可能性吗？

Answer 1

第二个使用效果是覆盖第一个使用效果集状态

useState函数不会自动合并状态。因此，您需要利用可通过回调访问的先前状态。

useEffect(
() => {
const tabledata = ...
setState(prevState => ({ // use previous state
...prevState,
tabledata
}))
}, [props.taenzer]
)

还有其他可能性吗？

您可以通过props对状态进行延迟初始化并删除第一个效果(无依赖性(

const [{ title, somethingElse, tabledata }, setState] = useState<State>({
...props,
tabledata: [],
});