映射未定义的 ReactJS 代码中的待办事项列表应用程序

Map undefined in ReactJS code for todo list app

本文关键字：列表 应用程序 未定义 ReactJS 代码 映射      更新时间：2023-09-26

我刚开始用ReactJS编码，必须构建一个待办事项应用程序。现在，显示从 API 调用收到的待办事项时出现问题。这是我得到的错误：

未

捕获的类型错误：无法读取未定义的属性"映射"

这是代码：

待办事项列表.js

import React from 'react';
import $ from 'jquery';
import TodoItem from './TodoItem';
class TodoList extends React.Component {
    constructor() {
        super();
    this.state = {
        todos: [
            {id: 0, title: "", completed: false}
        ]
    };
}

componentDidMount() {
    this.loadTodos();
}
loadTodos(event) {
    let component = this;
    $.getJSON(`https://whispering-thicket-55256.herokuapp.com/todos.json`, function(data) {
        console.log(data);
        component.setState({
            todos: data.todos
        });
    });
}
renderTodos(todo, i) {
    return (
        <TodoItem
            key={todo.id}
            id={todo.id}
            title={todo.title}
            completed={todo.completed}
            createdAt={todo.created_at}
            updatedAt={todo.updated_at} />
    );
}
render() {
    let todos = this.state.todos
return (
  <div>
            <ul>
        {todos.map(this.renderTodos.bind(this))}
      </ul>
  </div>
);
  }
}
export default TodoList;

待办事项.js

import React from 'react';
import jQuery from 'jquery';
class TodoItem extends React.Component {
    componentDidMount() {
        this.setState({
            id: this.props.id,
            title: this.props.title,
            completed: this.props.completed,
            createdAt: this.props.createdAt,
            updatedAt: this.props.updatedAt
        })
    }
    render() {
        console.log(this.props);
    return (
            <li>{this.props.title}</li>
    );
  }
}
export default TodoItem;
我

看不出我在这里做错了什么..希望有人能帮助我。我想要实现的是在一个列表中显示来自 .json url 的所有待办事项。如果您需要更多代码（app.js？），那么我也会发布！

谢谢！

可能是调用

渲染时未初始化待办事项，或者您的 Ajax 调用未返回预期内容。

尝试在渲染之前检查是否定义了待办事项

todos && todos.map...

还要检查您的 Ajax 响应是否是您需要的。

相关文章：