为什么我的列表在React中循环进入不同的寡妇

Question

我正在创建一个数据管理存储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)
                                        }));
                                    }}
                                    >&times;</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个窗口。

Answer 1

我认为问题是您的this.state.items。

所有信息都应放在一个项目中。

喜欢这样

state = {
    items: [
        {
          id: uuid(),
          date: '',
          activity: '',
          hours: '',
          learningStatement: '',
          evidence: '',
        },
    ]
}

并且还需要更新第一个按钮的onClick功能。
您一次可以保存所有信息。
例如：
export default class CpdList extends Component{
    state = {}
    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>
        );