我创建了一个数据管理存储Web应用程序(基本上是一个todo应用程序),我遇到的问题是,当我输入数据时,它会在单独的窗口中打印,我认为它正在某个地方循环播放,但我不确定。而且我似乎没有任何错误
这是我的CpdList.js
import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import uuid from 'uuid';
export default class CpdList extends Component{
state = {
items: [
{id: uuid(), date: ''},
{id: uuid(), activity: ''},
{id: uuid(), hours: ''},
{id: uuid(), learningStatement: ''},
{id: uuid(), evidence: ''}
]
}
render() {
const { items } = this.state;
return (
<Container>
<Button
color='dark'
style={{marginBottom: '2rem'}}
onClick={() => {
const date = prompt('Enter Date')
if(date) {
this.setState(state => ({
items: [...state.items, { id: uuid(), date }]
}));
}
const activity = prompt('Enter Activity')
if(activity) {
this.setState(state => ({
items: [...state.items, { id: uuid(), activity }]
}));
}
const hours = prompt('Enter Hours')
if(hours) {
this.setState(state => ({
items: [...state.items, { id: uuid(), hours }]
}));
}
const learningStatement = prompt('Enter Learning Statement')
if(learningStatement) {
this.setState(state => ({
items: [...state.items, { id: uuid(), learningStatement }]
}));
}
const evidence = prompt('Evidence YES or NO!')
if(evidence) {
this.setState(state => ({
items: [...state.items, { id: uuid(), evidence }]
}));
}
}}
>Add Data</Button>
<ListGroup>
<TransitionGroup className='cpdList'>
{items.map(({ id, date, activity, hours, learningStatement, evidence }) => (
<CSSTransition key={id} timeout={500} classNames='fade'>
<ListGroupItem>
<Button
className='remove-btn'
color='danger'
onClick={() => {
this.setState(state => ({
items: state.items.filter(item => item.id !== id)
}));
}}
>×</Button>
<ul className="list-group">
<li className="list-group-item">Date: {date}</li>
<li className="list-group-item">Activity: {activity}</li>
<li className="list-group-item">Hours: {hours}</li>
<li className="list-group-item">learning Statement: {learningStatement}</li>
<li className="list-group-item">Evidence: {evidence}</li>
</ul>
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup>
</Container>
)
}
};
刷新浏览器并且数据消失后,它还会重新打印5个窗口。
最佳答案
我认为问题是您的this.state.items
。
所有信息都应放入一个项目中。
像这样
state = {
items: [
{
id: uuid(),
date: '',
activity: '',
hours: '',
learningStatement: '',
evidence: '',
},
]
}
并且还需要更新第一个按钮的onClick功能。
您一次可以保存所有信息。
例如:
export default class CpdList extends Component{
state = {
items: []
}
handleClick = () => {
const date = prompt('Enter Date')
const activity = prompt('Enter Activity')
const hours = prompt('Enter Hours')
this.setState(state => ({
items: [
...state.items,
{
id: uuid(),
date,
activity,
hours,
}
]
}));
}
render() {
const { items } = this.state;
return (
<Container>
<Button
color='dark'
style={{marginBottom: '2rem'}}
onClick={this.handleClick}
>Add Data</Button>
</Container>
);
关于javascript - 为什么我的列表循环到React中的不同寡妇,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59100336/