Question

我的按钮和函数调用如下：

<td>
  <button
    id="home.js"
    type="button"
    className="btn btn-default btn-sm"
    onClick={this._onButtonClickHome}
  >
    <span className="glyphicon glyphicon-plus" />
  </button>
</td>

我的React代码是：

constructor() {
  this.state = {
    idList: ["hi"],
    showComponentHome: false
  };
}

_onButtonClickHome(event) {
  const idhome = event.target.id;
  console.log(idhome);
  this.state.idList.push(idhome);
  console.log(this.state.idList);
  this.setState({
    showComponentHome: true
  });
}

我无法将ID“ home.js”添加到列表idList中。有人可以解决这个问题或提出更好的方法吗？谢谢。

Answer 1

您可以尝试以下方法吗？

_onButtonClickHome(event) { 
    const idhome = event.target.id;
    const idList = Object.assign([], this.state.idList);

    idList.push(idhome);

    this.setState({idList, showComponentHome: true});
}

问题可能是您直接使用this.state.idList推送了新元素，但这不是更新状态的好方法。您应该在状态下创建当前数组的副本，对其进行更新，然后使用更新数组覆盖状态下的数组。

Answer 2

遵循其文档中定义的框架规则。有关更多阅读：doc部分：正确使用状态。关于不变状态有一点。

Answer 3

这是可行的解决方案，

import React, { Component } from "react";
class Solution extends Component {
  state = {
    idList: ["hi"],
    showComponentHome: false
  };

  _onButtonClickHome = (idhome) => {
    console.log(idhome);
    let tempArr = [...this.state.idList, idhome];
    this.setState({ idList: tempArr });
    this.setState({
      showComponentHome: true
    });
    console.log(tempArr);
  }
  render() {
    return (
      <button
        type="button"
        className="btn btn-default btn-sm"
        onClick={() => this._onButtonClickHome("home.js")}
      >
        Set State
      </button>
    );
  }
}

export default Solution;

希望对您有帮助。

Answer 4

请将按钮代码更改为以下内容：

<td><button id="home.js" type="button" className="btn btn-default btn-sm" onClick={(event) => this._onButtonClickHome(event)}><span className="glyphicon glyphicon-plus"></span></button></td>

请自动绑定以下功能：

_onButtonClickHome = (event) => {
  // Your code
}

您不能直接推送到this.state.idList。复制它。

const { idList } = this.state;

[这等效于const idList = this.state.idList-技术上称为对象分解]

现在您可以推送到idList。如果要把它放在状态上。

idList.push("idhome");

无法在React.js中添加项目到列表

4 个答案: