javascript - 为什么我的列表在 React 中循环到不同的寡妇

Question

我正在创建一个数据管理存储 Web 应用程序(基本上是一个待办事项应用程序)，我遇到的问题是当我输入数据时它会在单独的 Windows 中打印 我认为它在某处循环，但我不确定。而且我好像没有任何错误

这是我的 CpdList.js

    import React, { Component } from 'react';
    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 = {
        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>
        );