如何使用 this.state.items.map 呈现列表项？答案

【问题标题】：How to render a list item using this.state.items.map?如何使用 this.state.items.map 呈现列表项？
【发布时间】：2022-12-29 18:42:05
【问题描述】：

因此，我正在关注使用 Rails API 构建反应待办事项列表的教程。

当我尝试将任务添加到列表时，它会呈现要点而不是文本。检查控制台告诉我错误是：

"Warning: Each child in a list should have a unique "key" prop.

但我很确定我已经分配了一个关键道具？

我检查了有问题的代码行 {this.state.items.map((item) => (<TodoItem key={item.id} item={item} >{item}</TodoItem> 它似乎是正确的所以我不确定我在这里做错了什么？这是我的 TodoList.js


import React, { Component } from "react";
import TodoForm from "./TodoForm";
import TodoItem from "./TodoItem";

const  api_url = "http://localhost:3001/api/v1/todos"

class TodoList extends Component {
    constructor(props) {
      super(props)
      this.state = {
        items: []
      }
      this.updateTodoList = this.updateTodoList.bind(this);

    }

    componentDidMount () {
      this.getTasks();
    }

    getTasks() {
      fetch(api_url)
        .then(response => response.json())
        .then(response_items => {
          this.setState({
            items: response_items.reverse()
          })
      });
    }

    updateTodoList(item) {
      let _items = this.state.items
      // unshift adds to beginning of array
      _items.unshift(item)
      this.setState({
        items: _items
      })
    }

    render() {
        console.log(this.state.items)
        return (
            <div>
                <TodoForm api_url={api_url} updateTodoList={this.updateTodoList} />
                <ul id="todo_list">
                    {this.state.items.map((item) => (
                        <TodoItem key={item.id} item={item} >{item}</TodoItem>
                    ))}
                </ul>
            </div>
        )
    }
}
export default TodoList;

这是我的 ToDoItem.js

import React from "react";

export default function TodoItem(props) {
    return (
        <li>{props.item.task}</li>
    )
}

任何有关理解和修复此错误的帮助将不胜感激。

【问题讨论】：

这回答了你的问题了吗？ Understanding unique keys for array children in React.js
我不确定，我的密钥都有唯一的 ID，因为它们是从 Rails API 生成的，而且 Rails 从不重复 ID。所以我真的不明白我是怎么遇到这个问题的，检查 api 我的 ID 都不一样。
你在this.state.items 中有什么可以添加到问题中吗？您还需要将此行 <TodoItem key={item.id} item={item} >{item}</TodoItem> 更改为 <TodoItem key={item.id} item={item} />

标签： reactjs list key render

【解决方案1】：

您的item.id 不是唯一的。尝试console.log你的item.id来检查它们是否是独一无二的。

或者尝试：

{this.state.items.map((item, index) => (
    <TodoItem key={index} item={item}>{item}</TodoItem>
))}

【讨论】：

所以我尝试了来自@Mart 的上述代码，但是当我将任务添加到列表时它仍然没有呈现。我还控制台记录了我的 ID，它们都是独一无二的。没有两个是相同的。（还是）感谢你的建议。

【解决方案2】：

我修复了错误。我在 FormSubmit 函数中的“response.json”之后缺少一个括号。

    async formSubmit(formData) {
      var data = new FormData(formData)
      await fetch(this.state.api_url, {
        method: "POST",
        mode: "cors",
        body: data
      }).then(response => response.json)
      .then(response => this.props.updateTodoList(response))
    }

成为

    async formSubmit(formData) {
      var data = new FormData(formData)
      await fetch(this.state.api_url, {
        method: "POST",
        mode: "cors",
        body: data
      }).then(response => response.json())
      .then(response => this.props.updateTodoList(response))
    }

并修复了它。

【讨论】：