Question

我正在从 React 组件向我的 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)
    })
})

Answer 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>
)
      }))

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

1 个答案: