无法从 React 前端获取 express API

Question

我现在已经进入第三周尝试简单地从 Express API 获取 json 响应到 React 应用程序中。我已经尝试了至少 40 个小时的教程，但我仍然无法让它工作。出于绝望，我想把它贴在这里，我知道我会被处以私刑，因为这将是某种形式的重复，但我正在寻找一个人来解决这个问题，希望能帮助我理解我做错了什么。这是我从 React 调用它的最新尝试import React, { Component } from 'react';class App extends Component {   constructor(){       super();       this.state ={key: 0, title: ''};   }   componentDidMount() {          fetch('http://localhost:3001/')            .then(res => {                console.log(res);                return res.json()             })            .then(todos => {                 console.log(todos);                 this.setState({ todos })             });         }   render() {        return (            <div className="App">                <h1>todos</h1>                {this.state.todos.map(todo =>                <div key = {this.state.key} > title: {this.state.title} </div>              )}            </div>        );    }}export default App;这会产生一个错误：Uncaught TypeError: Cannot read property 'map' of undefined有人可以解释一下获取这种格式的数据的正确方法吗？

Answer 1

你需要在构造函数中初始化 todos

constructor(){

       super();

       this.state ={key: 0, title: '', todos: []};

   }

因为最初在调用 render 方法时，API 仍在进行中，当时todos是未定义的。

因此，当您尝试.map在未定义的情况下运行 a 时，它会崩溃。

Answer 2

我认为你混合了 state 和 todos 数组。在构造函数中初始化状态如下：

constructor(){

   super();

   this.state ={ todos: [key: 0, title: '']};

}

在渲染函数中：

render() {

        return (

            <div className="App">

                <h1>todos</h1>

                {this.state.todos.map(todo =>

                <div key = {todo.key} > title: {todo.title} </div>

              )}

            </div>

        );

    }

Answer 3

您todos将在初始运行render前未定义componentDidMount，因此您必须todos像这样使用空数组初始化

constructor(){

       super();

       this.state ={key: 0, title: '', todos: []};

   }