子元素的唯一关键道具问题

Question

我有一个用 React 构建的通用待办事项列表。来自用户输入的每个任务都存储在父组件 <ReactTodoApp /> 中声明的 tasks 数组中。任务在子组件 <TodoList /> 中呈现。 key 被分配给 DOM 元素 <label /> 中的每个任务。检查开发工具时正在生成唯一 ID，但错误仍然存在。

有人知道为什么我仍然收到“唯一密钥道具”错误吗？

Link 工作应用程序：https://codesandbox.io/s/todo-list-34udn?file=/src/App.js

JS 文件：

import React, { Component } from "react";
import "./styles.css";

export default class ReactTodoApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //container for new task
      input: "",
      tasks: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
  }

  handleChange(event) {
    this.setState({ input: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    //condition for empty empty
    if (!this.state.input) {
      return;
    }
    //declare object to store
    const newTask = {
      input: this.state.input,
      id: 1 + Math.random()
    };
    //request update to current tasks state
    this.setState((state) => ({
      tasks: state.tasks.concat(newTask),
      input: ""
    }));
  }

  //updater function to remove task
  handleRemove(props) {
    //create new task list
    const newTasksList = this.state.tasks;
    //remove selected item from new task list
    newTasksList.splice(props, 1);
    //update state for tasks
    this.setState({ tasks: newTasksList });
  }

  render() {
    return (
      <div>
        <h1>React Todo</h1>
        <form onSubmit={this.handleSubmit} className="add-item">
          <input
            type="text"
            value={this.state.input}
            onChange={this.handleChange}
            className="add-item__input"
            placeholder="new item"
          />
          <button type="submit" className="submit">
            add item
          </button>
        </form>
        <TodoList tasks={this.state.tasks} handleRemove={this.handleRemove} />
      </div>
    );
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <div className="list-container">
        {this.props.tasks.map((task) => (
          <label keys={task.id} className="item-container">
            <input type="checkbox" />
            <p className="item__text">{task.input}</p>
            <button onClick={this.props.handleRemove} className="remove-button">
              x
            </button>
            <span className="custom-checkbox" />
          </label>
        ))}
      </div>
    );
  }
}

Answer 1

只需将 keys={task.id} 更改为 key={task.id}

子元素的唯一关键道具问题

Issue with unique key props for child elements

javascript

key

parent-child

reactjs