时间戳

首页 > 解决方案 > 等待状态在 React native 中设置后如何打开模式？

javascript - 等待状态在 React native 中设置后如何打开模式？

问题描述

我有一个屏幕上有一些选择。如果您选择该选项，它会设置数据的状态。然后我有一个确认按钮。如果用户点击确认，我会进行异步调用以获取一些额外的数据。我想在打开模态之前等待这种情况发生，因为我需要在我的模态中显示额外的数据。

在挂钩之前，我会使用 setState 并执行以下操作： this.setState({data: myData}, () => this.openModal())因为这将可靠地设置状态然后打开模式。网上所有的答案似乎都建议使用useEffect，但这样做似乎很狡猾：

useEffect(() => {
    if (data) {
        setModalOpen(true)
    }
}, [data, setData])

我不希望我的模态可能在不同点随机打开。另外，将代码放在我设置状态的同一个地方似乎更好。在那里很有意义。不是随机的useEffect

有什么建议可以实现吗？

（我能想到的另一种解决方案是在每个选择上进行 API 调用，而不是在确认之前）但是，这可能会导致很多不必要的 API 调用，所以我宁愿不走那条路。

标签： javascriptreactjsreact-nativeuse-state

解决方案

使用useEffect()是正确的，我在尝试使用钩子对 setState 进行回调时也遇到了这个问题。

就像你说的：this.setState({data: myData}, () => this.openModal())以前是可能的，但是现在当用钩子尝试这个时，控制台会显示错误：

警告：来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。

所以useEffect()似乎要走的路。

useEffect()如果您想对状态执行某些操作，例如验证，则应在正确设置状态后将其用作回调。

useEffect(() => {
  // fetch on load
  axios.get("https://randomuser.me/api/").then((response) => {
    setPerson(response.data.results[0]);
  });
}, []);

useEffect(() => {
  // do some validation perhaps
  if (person !== null) {
    if (person.name.first && person.name.last) {
      setModal(true);
    } else {
      setModal(false);
    }
  }
}, [person]); // add person in dependency list

正如评论中所建议的，您也可以setModal()在异步数据到达时执行（使用.then() or await）。

一些使用随机用户生成器 API和axios进行获取的示例代码。

  useEffect(() => {
    // fetch on load
    axios.get("https://randomuser.me/api/").then((response) => {
      setPerson(response.data.results[0]);
      setModal(true); // set modal visibility
    });
  }, []);

推荐阅读