警告：列表中的每個孩子都應該有一個唯一的“key”道具。 - ReactJS

Question

我正在使用 ReactJS 構建一個看板應用程序，用戶可以在其中將“卡片”添加到三個不同的“列”（Todos、Onprogress 和 Done）。 我遇到的問題是，應該在卡片中顯示的內容沒有按照它應該的方式顯示，盡管我的狀態正在返回它的對象就好了（當我 console.log 一切時）。 我認為問題在於我將一個對象推送到一個數組中，然后將其作為值添加到我的一個鍵中，因此當我使用 props 傳遞它時，我的數據沒有被正確讀取。 我將在下面分享我所有的代碼庫。

這是我的應用程序組件：

 import React, { Component } from 'react'; import Column from './Column'; import AddCardForm from './AddCardForm'; import './App.css'; class App extends Component { constructor(props) { super(props) this.state = { columns: [ { name: 'Todos', cards: [] }, { name: 'Onprogress', cards: [] }, { name: 'Done', cards: [] }, ] }; }; // componentDidMount() { // const { coldata } = this.state.columns // console.log(coldata); // // this.ref = base.syncState(); // } addCard = (card, otherStatus) => { console.log("Adding a Card"); const cards = { ...this.state.columns.cards }; cards[`card`] = card; let todosCards = [] let onprogressCards = [] let doneCards = [] Object.values(otherStatus).map(function(value) { if (value.includes('Onprogress') && value.includes('Done')) { todosCards.push(cards) } else if (value.includes('Todos') && value.includes('Done')) { onprogressCards.push(cards); } else if (value.includes('Todos') && value.includes('Onprogress')) { doneCards.push(cards); } return(todosCards || onprogressCards || doneCards); }); console.log(todosCards); console.log(onprogressCards); console.log(doneCards); this.setState({ columns: [ { name: 'Todos', cards: todosCards }, { name: 'Onprogress', cards: onprogressCards }, { name: 'Done', cards: doneCards }, ] }); } render() { return ( <div className="App"> {Object.keys(this.state.columns).map(key => ( <Column key={key} details={this.state.columns[key]} /> ))} <AddCardForm addCard={this.addCard} /> </div> ); } } export default App;

這是我的列組件：

 import React, {Component} from "react"; import Card from "./Card" class Column extends Component { render() { return ( <div className="column"> <h1 className="Title">{this.props.details.name}</h1> {Object.keys(this.props.details.cards).map( keycard => ( <Card keycard={keycard} data={this.props.details.cards[keycard]} /> ))} </div> ); } } export default Column;

這是我的卡片組件：

 import React, {Component} from "react"; class Card extends Component { render() { const {taskName, taskDescription, taskPeriod } = this.props.data; // const isTaskOn = taskStatus return ( <div className="card"> <span className="title">{taskName}</span> <div className="description"> <h4>{taskDescription}</h4> </div> <div className="period"> <h4>{taskPeriod}</h4> </div> <div className="status"> <select> <option value='Todos'>Todos</option> <option value='Onprogress'>Onprogress</option> <option value="Done">Done</option> </select> </div> </div> ); } } export default Card;

這是我的 AddCardForm 組件：

 import React, { Component } from 'react'; class AddCardForm extends Component { taskName = React.createRef(); taskDescription = React.createRef(); taskPeriod = React.createRef(); taskStatus = React.createRef(); addCardtoApp = event => { event.preventDefault(); const card = { taskName: this.taskName.current.value, taskDescription: this.taskDescription.current.value, taskPeriod: this.taskPeriod.current.value, }; const cardStatus = this.taskStatus.current.value; let otherStatus = { otherStatus: this.taskStatus.current.textContent.replace(`${cardStatus}`, ''), }; this.props.addCard(card, otherStatus); event.currentTarget.reset(); }; render() { return ( <form onSubmit={this.addCardtoApp}> <label> Task Name: <input type="text" name="taskName" ref={this.taskName}/> </label> <br /> <label> Description: <input type="text" name="taskDescription" ref={this.taskDescription} /> </label> <br /> <label> Period: <input type="text" name="taskPeriod" ref={this.taskPeriod} /> </label> <br /> <label> Task Status: <select type="text" name="taskStatus" ref={this.taskStatus}> <option value="Todos">Todos</option> <option value="Onprogress">Onprogress</option> <option value="Done">Done</option> </select> </label> <br /> <input type="submit" value="Submit" /> </form> ); } } export default AddCardForm;

Answer 1

在使用循環構建 React 組件的任何地方，您都必須添加 prop key並傳遞一個唯一值。

您可以重新定義map調用以包含這樣的索引：

 Object.keys(this.state.columns).map((count, key) => ( <Column key={count} details={this.state.columns[key]} /> ))

Answer 2

從反應文檔：

鍵幫助 React 識別哪些項目已更改、添加或刪除。 應為數組內的元素提供鍵，以使元素具有穩定的身份

因此，本質上，如果您將數組映射到組件，則每個組件（映射的組件）的唯一鍵將確保僅在必要時重新渲染這些組件。

請遵循此文檔，您將了解警告想要深入告訴您的內容。