javascript - 为什么我的列表循环到React中的不同寡妇(why does my list loop into different widows in React)

Question

Im creating a data management storage web app (basically a todo app ) and the issue im having is that when i enter my data it prints in separate windows

(我创建了一个数据管理存储Web应用程序（基本上是一个todo应用程序），而我遇到的问题是，当我输入数据时，它会在单独的窗口中打印)

i think it's looping somewhere but i am not sure.

(我认为它在某个地方循环播放，但我不确定。)

and i don't seem to have any errors

(而且我似乎没有任何错误)

here is my CpdList.js

(这是我的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>
        )
    }
};

it also reprints 5 windows when the browser is refreshed and the data goes away.

(刷新浏览器并且数据消失后，它还会重新打印5个窗口。)

  ask by Sean van Loggerenberg translate from so

Answer 1

I think the problem is your this.state.items .

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

all the info should put into an item.

(所有信息都应放入一个项目中。)

like this

(像这样)

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

and also need to update the onClick function of the first button.

(并且还需要更新第一个按钮的onClick功能。)

You can save all the info once.

(您一次可以保存所有信息。)

for example:

(例如：)

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