为什么我的列表循环到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个Windows。

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>
        );

Answer 2

抱歉，我的前端代码有问题：

export default class CpdList extends Component{
    state = {}
    handleClick = () => {
      const date = prompt('Enter Date')
      const activity = prompt('Enter Activity')
      const hours = prompt('Enter Hours')
      const learningStatement = prompt('Enter Learningg Statement')
      const evidence = prompt('YES! or NO!')
      this.setState(state => ({
        items: [
          ...state.items,
          {
            id: uuid(),
            date,
            activity,
            hours,
            learningStatement,
            evidence
          }
        ]
      }));
    }



    render() {
        const { items } = this.state;

        return (
            <Container>
                <Button
                    color='dark'
                    style={{marginBottom: '2rem'}}
                    onClick={this.handleClick}
                >Add Data</Button>

                <Button
                    color='dark'
                    style={{marginBottom: '2rem'}}
                    onClick={() => { this.handleClick(items._id) }}
                >Delete Data</Button>

                {/* <button 
                    onClick={() => { this.handleClick(items._id) }}
                    color='dark'
                    style={{marginBottom: '2rem'}}
                    className="delete-btn"
                >Delete</button> */}

            </Container>
        );
    };
};

我的删除功能也有问题。我不能让它工作

CpdList.js:16 Uncaught TypeError: state.items is not iterable

这就是我在尝试加载数据时遇到的错误。