Question

我尝试使用带有钩子的react。我处于这种状态：

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

现在，我的行为是第二个useeffect覆盖了第一个useeffect setState命令。我可变的titel和somethingElse总是空的。

现在我可以通过以下方式更改状态声明：

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

但这使整体不清楚，并且像设置setState（... state，titel =“ Hello”，somethingElse =“ Else”）一样一次设置多个变量的状态并非易事

还有其他可能性吗？

Answer 1

第二个useeffect覆盖第一个useeffect setState

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

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

还有其他可能性吗？

您可以通过props拥有lazy initialization状态，并删除第一个效果（无依赖性）

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

使用两个useeffect react钩子

1 个答案: