我正在使用 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;
最佳答案
在任何使用循环构建 React 组件的地方,您都必须添加 Prop key
并为其传递一个唯一值。
您可以重新定义您的 map
调用以包含这样的索引:
Object.keys(this.state.columns).map((count, key) => (
<Column key={count} details={this.state.columns[key]} />
))
关于javascript - 警告 : Each child in a list should have a unique "key" prop. - ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57258247/