如何在 useEffect 方法中使用 useState 设置状态？答案

【问题标题】：How do I set state using useState inside the useEffect method?如何在 useEffect 方法中使用 useState 设置状态？
【发布时间】：2021-04-10 18:51:50
【问题描述】：

我正在从一个反应组件对我的 Mongo 数据库进行简单的 API 调用，该数据库返回一个项目列表。在useEffect 内部，我发出GET 请求以返回reviews 的数组。当我将结果记录到数据中时，我看到了正确的信息：

useEffect(() => {
    axios.get('http://localhost:3000/all-reviews')
  .then((allReviews) => {
    console.log(allReviews)
  })
  })

但是，当我尝试在 useEffect 方法中设置状态时，我的程序会中断。我知道 setState 是异步的，那么如何配置它以使其在 useEffect 中工作？

这是用于控制 API 调用的整个组件：

App.jsx

import React, {useState, useEffect} from 'react'
import axios from 'axios'

const App = () => {
  const [reviews, setReviews] = useState([])

  useEffect(() => {
    axios.get('http://localhost:3000/all-reviews')
  .then((allReviews) => {
    setReviews(allReviews)
  })
  })

  return (
    <>
    <h1>React development has begun!</h1>
    {
      reviews.map((item, index) => {
        <h1>item.title</h1>
      })
    }
    </>
  )
}

export default App

没那么相关，但这是该组件调用的路由：

server.get('/all-reviews', (req,res) => {
    Review.find()
    .then((result) => {
        res.send(result)
    })
    .catch(err => {
        console.log(err)
    })
})

【问题讨论】：

.then((allReviews) => { setReviews(reviews) }) 错字，你需要.then((allReviews) => setReviews(allReviews) 或.then(setReviews)
谢谢 - 修正了错字，但仍然无法正常工作。
见stackoverflow.com/questions/53120972/…

标签： reactjs axios react-hooks

【解决方案1】：

我认为首先，您的 useEffect 没有依赖关系，这意味着它每次都会运行，它至少需要一个空数组，如下面的。

useEffect(() => {

  },[])

当你在 React 中期待 JSON 数据时，你必须先检查数据是否可用，然后再填充它，如果没有，react 就会崩溃。

你可以这样做。

  return (
    <>
    <h1>React development has begun!</h1>
    {
      reviews?.map((item, index) => {
        <h1>item.title</h1>
      })
    }
    </>
  )
}

或者这个

  return (
    <>
    <h1>React development has begun!</h1>
    {
      reviews && (reviews.map((item, index) => {
        <h1>item.title</h1>
      }))
    }
    </>
  )
}

第三，你没有在你的 dom 中返回任何东西。应该是这样的。

  reviews && (reviews.map((item, index) => 
        <h1>item.title</h1>
      ))

或者如果你想按照自己的方式做，你可以这样做。

  reviews && (reviews.map((item, index) => {
return (
        <h1>item.title</h1>
)
      }))

【讨论】：