Question

首先我有这个addNameId方法

addNameId(event) {
  event.preventDefault();
  var data = this.props.data;
  data.push({name:this.props.name, id: this.props.id})
  this.props.setData(data);

}

在调用removeData

之前，一切都很好

removeData(key) {
  console.log(key);
  const data = {...this.state.data};
  delete data[key];
  this.setState({ data });
}

一旦我调用removeData，我就再也无法为数据添加任何内容。

这就是我称之为

的地方

  renderData(key){
          if (!this.props.data[key]) return null;
          const user = this.props.data[key] || {};
          console.log(user.name);
          console.log(user.id);
          return(
            <div key={key}>
                <li>  <strong> Name: </strong>  {user.name},
                <strong>  ID: </strong> {user.id} </li>
                <button onClick={() => this.props.removeData(key)}> Remove </button>
            </div>
          )
        }

我可以用{<1}}取代什么？

编辑：

我的构造函数

data.push({name:this.props.name, id: this.props.id})

Answer 1

您需要纠正的一些事情。

在addNameId函数中指定var data = this.props.data;，但只为{}设置data的引用，因此您可以直接改变道具

更改为

addNameId(event) {
  event.preventDefault();
  var data = [..this.props.data];
  data.push({name:this.props.name, id: this.props.id})
  this.props.setData(data);

}

您正在this.state.data removeData中const data = {...this.state.data};创建一个新的对象。它的作用是它在this.state.data内解构内容并改为创建一个对象。由于this.state.data是一个数组，您应该已完成const data = [...this.state.data];
delete从对象中删除一个键，当您使用数组时，可以使用splice删除index等于key的对象，如data.splice(key, 1) }

将功能更改为

removeData(key) {
  console.log(key);
  const data = [...this.state.data];
  data.splice(key, 1);
  this.setState({ data });
}

未捕获的TypeError：data.push不是函数。我怎样才能解决这个推送错误？

1 个答案: