时间戳

首页 > 解决方案 > 新组件覆盖前一个

javascript - 新组件覆盖前一个

问题描述

import React, { Component } from 'react'
import Item from './components/item'
import './App.css'
class App extends Component {
    state = { item: "", array: [], check: false }
    setItem = (event) => {
        this.setState({
            item: event.target.value
        })
    }

    add = () => {
        let item = this.state.item;
        if (item != "") {
            let arr = []
            arr.push(item)
            this.setState({ item: "", array: arr, check: true })
        }
        console.log(this.state.array)
    }

    render() {
            return ( < div > < input type = "text"
                    value = { this.state.item }
                    onChange = { this.setItem }
                    / > < button onClick = { this.add } > Add < /button > {
                        this.state.check ? < div > {
                            this.state.array.map(item => < Item name = { item }
                                />) } < /div >: null
                            } < /div > );
                        }
                    }
                    export default App

我实际上编写了这段代码来构建购买剩余物品。问题是第一个项目成功添加，但之后我无法添加更多项目。每次我尝试它都会覆盖以前添加的项目。

标签： javascriptreactjsweb

解决方案

在您的add函数中，如果状态中没有项目，则您声明arr为一个新的（空）数组，并且只将一个项目推送到它。然后，您使用 setState 用您的新数组覆盖当前数组（仅包含一项）

要添加到数组中，您需要首先复制当前在其中的所有项目，然后推送到它们

add = () => {
  let item = this.state.item;
  if (item != '') {
    this.setState(prevState => {
      let arr = [...prevState.array]; // Shallow copy of the array currently stored in the state
      arr.push(item);
      return { item: '', array: arr, check: true };
    });
  }
  console.log(this.state.array);
};

推荐阅读