未处理的拒绝（TypeError）：无法读取未定义 MERN 的属性“长度”

Question

我使用 MERN 堆栈构建了一个待办事项应用程序。我是这个新的 Web 开发堆栈的新手，我收到了这个错误

无法读取属性“长度”

我发现很难解决这个错误。学习 MERN 的最佳资源是什么？

Todo.js

import React, { Component } from 'react'
import axios from 'axios';

 // eslint-disable-next-line

export class Todo extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             todos : [],
             item : ""
        }
    }

    changeHandler = (event) => {
        this.setState({item: event.target.value})
    }

    clickHandler = (event) => {
        event.preventDefault()
        console.log(this.state.item)
        axios({
            method: 'post',
            url: 'http://localhost:3000/',
            data: {
              todo: this.state.item,
            }
          });
        this.setState({item:''})
    }

    componentDidMount() {
        axios.get('http://localhost:3000/').then((response) => {
            console.log(response.data.data)
            let data = [];
            console.log(response.data.data.length)
            for(var i =0; i < response.data.data.length; i++){
                data.push(response.data.data[i].todo)
            }
            this.setState({todos: data})
        });
    }
    componentDidUpdate() {
        axios.get('http://localhost:3000/').then((response) => {
            console.log(response.data.data)
            let data = [];
            console.log(response.data.data.length)
            for(var i =0; i < response.data.data.length; i++){
                data.push(response.data.data[i].todo)
            }
            this.setState({todos: data})
        });
    }
  
    render() {
        
        return (
            <div>
                <input type="text" onChange={this.changeHandler}/>
                <button type="submit" onClick={this.clickHandler}>add</button>
                <div>
                    <ul>{this.state.todos.map((todo, index) => <li key={index}>{todo}</li>)}</ul>
                </div>
            </div>
        )
    }
}

export default Todo

Answer 1

我相信你的错误在这里response.data.data.length 要处理此错误，您可以将值放入变量中

const responseDataLength = response?.data?.data?.length || 0;

然后在你的循环中使用这个值

这只会处理错误 错误的原因仍未处理。您需要弄清楚为什么响应数据不是您所期望的。