Question

我创建了一个存储数据的应用程序，但是当我完成提示输入时，出现此错误：

这是我的CptList.js

import React, { Component } from 'react';
import { Container, Button } from 'reactstrap';
import uuid from 'uuid';



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 Learning 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>
            </Container>
        );
    };
};

有人可以告诉我我做错了什么吗？我的删除功能也遇到问题，这是后端的删除代码：

//Delete a Item
router.delete('/:id', (req, res) => {
    Item.findById(req.params.id)
      .then(item => item.remove().then(() => res.json({ success: true })))
      .catch(err => res.status(404).json({ success: false }));
});

Answer 1

我认为您必须使用以下方法初始化状态：

state = { items:[] }

第一次将项目添加到未定义的空列表中。

此外，我认为某些地方缺少state.items.map（至少对于删除按钮而言）

Answer 2

state = [] // convert to array beacuse use map() or other javascipt method

 this.setState(state => ({
            items: [
// do not speard maybe 
              {
                id: uuid(),
                date,
                activity,
                hours,
                learningStatement,
                evidence
              }
            ]
          }));

plz编写handleClick函数告诉我是否工作

无法在本地浏览器中显示数据

2 个答案: