Question

useEffect 可以等待 setState(hook) 吗？

2019-09-24

77

reactjs

我在 useEffect 中有一个代码（如 componentDidMount）：

useEffect(()=>{
    const idChat = props.match.params.id;
    const data = {
      idChat,
      user: props.user._id
    }
    authService.getChat(data)
    .then(res =>{
      const userChat = res.data.users.filter(e=> e!== data.user).toString()
      authService.getuser(userChat)
      .then(res=>{
        setOtherUser(res.data)
      })
    })
    .catch(err=>{
      setErrors(err.response)
    })

  }, [])

此代码运行一次。好的。

我需要另一个使用 otherUser 状态的 useEffect。但它尚未设置。

useEffect(()=>{
  socket.readUsers(users => {
    const is = users.users.indexOf(otherUser._id);
    console.log(users,otherUser._id, is)
    if(is < 0){
      setUsersStatus(false)
    }else{
      setUsersStatus(true)
    }
  });
 })

如果我执行条件，则永远不会进入 if :/ 如何在 useEffect 中调用 otherUser？

Answer 1

将其添加为效果的依赖项。这样，当未设置 otherUser 时，您就可以跳过执行代码。

useEffect(() => {
  if (otherUser) {
    socket.readUsers(users => {
      const is = users.users.indexOf(otherUser._id);
      console.log(users, otherUser._id, is);
      if (is < 0) {
        setUsersStatus(false);
      } else {
        setUsersStatus(true);
      }
    });
  }
}, [otherUser]);

Answer 2

添加 otherUser 用户作为此形状，并将 otherUser 的依赖项作为第二个参数 arry[otherUser]

useEffect(()=>{
if(otherUser){....}
},[otherUser])