所以我正在学习用rails API构建react todo列表的教程。
当我尝试将任务添加到列表时，它会显示项目符号而不是文本。检查控制台时，它告诉我错误是：

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

但我很确定我已经分配了一个关键 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>
    )
}

任何帮助了解和修复此错误将不胜感激。