Question

想要将元素推送到状态变量数组中

2019-09-13

61

reactjs

我希望每次单击复选框时都将元素推送到状态变量数组中。问题是，当我单击复选框时，值被推送到数组中，但是当我单击另一个复选框时，数组会冲走旧值，并且其中只有一个值。

export default class Demo extends Component{
    constructor(props){
        super(props);
        this.state = {
            attachmentList : []
        };
    }
    addAttachmentid = (e) => {

        console.log("1st",this.state.attachmentList)
        if(e.target.checked){
            this.setState({

                 attachmentList:this.state.attachmentList.push(e.target.value)
            });
        }
        else{
            this.setState({
                attachmentList:this.state.attachmentList.pop(e.target.value)
            });
        }

        console.log("attachmentlist",this.state.attachmentList)
    }
        render(){
             return (
                   <input type="checkbox" value="20" onChange={this.addAttachmentid} />
                   <input type="checkbox" value="21" onChange={this.addAttachmentid} />
                   <input type="checkbox" value="22" onChange={this.addAttachmentid} />
             )
        }
}

Answer 1

这是因为 pop 方法返回已删除的项目，而不是返回整个数组。您可以使用 filter 来执行此操作。

const filteredList = this.state.attachmentList.filter(item => item !== e.target.value);

// set this in the state.

Pop 方法参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

Answer 2

我们永远不应该改变状态（在您的情况下是数组）

这是工作代码

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    attachmentList: [],
    checkBoxValue: ["20", "21", "22"]
  };
  addAttachmentid = ({ target: { value, checked } }) => {
    console.log("1st", this.state.attachmentList);
    let attachement = [...this.state.attachmentList];

    if (checked) {
      attachement.push(value);
    } else {
      attachement.pop(value);
    }
    console.log("2nd", attachement);
    this.setState({
      attachmentList: attachement
    });
  };

  render() {
    return (
      <>
        {this.state.checkBoxValue.map(value => {
          return (
            <input
              type="checkbox"
              value={value}
              onChange={this.addAttachmentid}
            />
          );
        })}
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望有帮助！！！

Answer 3

不要直接改变状态，而是使用数组扩展和 filter ：

  addAttachmentid = e => {
    console.log("1st", this.state.attachmentList);
    const { checked, value } = e.target;

    this.setState(
      state => {
        if (checked) {
          return {
            attachmentList: [...state.attachmentList, value]
          };
        }
        return {
          attachmentList: state.attachmentList.filter(
            attachment => attachment !== value
          )
        };
      },
      () => {
        console.log("attachmentlist", this.state.attachmentList);
      }
    );
  };

其他一些事项：

如果下一个状态依赖于前一个状态，请使用 setState 的函数形式
如果要在设置新状态后立即检查新状态，请使用 setState 的回调函数。

我最近写了一篇帖子，介绍这些错误以及其他一些常见的 React 错误。