如何在Use Effect中等待setState，直到呈现？ [英] How to wait for setState in useEffect until render?

问题描述

  let [item, setItem] = useState({});
  let [comments, setComments] = useState([]);
  useEffect(async () => {
    await axios
      .all([
        axios.get(`https://dummyapi.io/data/v1/post/${id}`, {
          headers: { "app-id": process.env.REACT_APP_API_KEY }
        }),
        axios.get(`https://dummyapi.io/data/v1/post/${id}/comment`, {
          headers: { "app-id": process.env.REACT_APP_API_KEY }
        })
      ])
      .then(
        axios.spread((detail, comment) => {
          setItem({ ...detail.data })
          setComments([...comment.data.data])
        })
      )
      .catch((detail_err, comment_err) => {
        console.error(detail_err);
        console.error(comment_err);
      });
  }, []);

我如上所述地设置了状态。 我尝试使用State作为回报()，但它似乎没有等待数据集。

return (
          <div>
            {item.tags.map((tag, index) => {
              return <Chip label={tag} key={index} />
            })}
          </div>
)

因为我收到了这样的错误消息：未捕获TypeError：无法读取未定义的属性(正在读取‘map’)。 因为我初始化了‘Item’只是空的{Object}，所以它不能读取‘item.tag’，这是由useEffect中的setState设置的。

如何等待数据集？

json

最初，item为空推荐答案({})。您应该使用optional chaining operator(?.)轻松清除空或未定义的异常。

return (
          <div>
            {item?.tags?.map((tag, index) => {
              return <Chip label={tag} key={index} />
            })}
          </div>
)

这篇关于如何在Use Effect中等待setState，直到呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！