如何使 UseEffect 挂钩逐步运行而不是持续运行？

Question

我有从数据库中获取数据的 UseEffect 钩子，我希望它在我的组件中首先运行，但它最后运行。

如何让它在“console.log(titleee)”之前运行？

代码：

 const [cPost, setCPost] = useState([]);
  const postId = id.match.params.id;

  useEffect(() => {
    axios.get('http://localhost:5000/posts/'+postId)
      .then(posts => {
        setCPost(posts.data);
        console.log("test");
      })
  }, []);



const titleee = cPost.title;
console.log(titleee);

Answer 1

我认为这不是您想要采取的正确道路。

为了在请求/posts/+postId完成后在您的页面上显示cPost ，您可以选择退出以下两个选项。

如果cPost数据对您的整个组件至关重要，您可以向用户显示“加载器”。

const [fetchingCPost, setFetchingCPost] = useState(false)
const [cPost, setCPost] = useState({});
const postId = id.match.params.id;

useEffect(() => {
  setFetchingCPost(true)
  axios.get('http://localhost:5000/posts/'+postId)
    .then(posts => {
      setFetchingCPost(false)
      setCPost(posts.data);
  })
}, []);

return fetchingCPost && <div>Loading</div>

或者，您可以从一开始就为cPost设置一些默认值。 只是为了确保您的代码不会中断。 我认为第一个解决方案可能更容易被 UX 接受。

const [cPost, setCPost] = useState({title: '', description: ''});

如果您想将title存储为单独的变量，您可以使用useMemo或通过与useState相同的cPost进行操作。 但即便如此，您也无法在请求完成后“创建”它，您可以简单地更改它的 value 。

如果你想使用useMemo ，你可以让它依赖于你的cPost 。

const cPostTitle = useMemo(() => {
  return !!cPost.title ? cPost.title : ''
}, [cPost])

Answer 2

在进行 React 编程时，您必须改变您的思维方式。 了解 React 的工作原理很重要。 React 不支持命令式编程，而是支持声明式和自上而下的方法，在这种情况下，您必须声明您的标记并将其与您的数据一起提供，然后标记更改的唯一方法是通过更改您的数据。 因此，在您的情况下，您正在使用 useState hook const [cPost, setCPost] = useState([]);声明一个监视变量 ，此变量（cPost）的初始值为[]然后反应继续使用初始值渲染您的标记，以将渲染的标题更新为您从网络请求获得的内容（例如：rest API 调用）您使用另一个挂钩在渲染组件后调用（useEffect）。 在这里，您有机会获取数据并更新您的 state。 为此，您执行以下操作：

  useEffect(() => {
    axios.get('http://localhost:5000/posts/'+postId)
      .then(posts => {
        setCPost(posts.data);
      })
  }, []);

此代码导致第二次渲染，因为部分数据是更改。 这里反应引擎继续并根据数据更改重新绘制您的标记。

如果您检查此沙箱，您将看到两个控制台日志，在第一个渲染中，标题在第二个渲染中未定义，这是我们从网络获得的。

Answer 3

尝试添加 async/await 看看它是否有效。 这是供您参考的链接https://medium.com/javascript-in-plain-english/how-to-use-async-function-in-react-hook-useeffect-typescript-js-6204a788a435