React setState 导致崩溃

Question

我正在对返回包含详细信息的 JSON 数组的后端脚本进行 axios 调用。后端脚本如下：

app.get('/getAllData', cors(), function (req, res) {


    findAll().then((result) => {
        // res.writeHead(200)
        res.setHeader("Content-Type","application/json")
        res.send(result)
        res.end()
    })


});
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

findAll() 是从数据库中读取数据并返回数组的异步函数。我已经多次点击 URL 并得到了结果。

现在，当我尝试从 react 前端进行 axios 调用时，结果在浏览器的控制台中显示良好。但是当我尝试将结果存储在类的状态中时，它会导致应用程序崩溃。这是下面的反应函数：

  makeSongCards = () => {
    axios.get("http://localhost:5000/getAllData")
      .then((result) => {
        const data = result.data
        console.log(result.data);
        // this.setState({res:data})
      })
      .catch(err=>console.log(err));;

还有 P.S.出于某种原因，console.log(result.data); 语句在浏览器的控制台中打印了两次。我不知道它是否相关，但我觉得很奇怪。

更新：

初始状态：

  constructor(props) {
    super(props);
    this.state = { res: [] }
  }

Answer 1

makeSongCards 不应直接在render 方法中调用，而应在生命周期方法中调用，例如componentDidMount 或componentDidUpdate。这样做的原因是，您更新了状态，如果您在渲染期间更新状态，它将重新启动渲染周期，您将像现在一样进入无限循环。

尝试使用componentDidMount 而不是render 拨打电话，如果无限console.log 消失，请告诉我。

另外，不清楚你所说的崩溃是什么意思？后端服务器崩溃还是前端应用程序崩溃？你说的崩溃到底是什么意思？