Question

我试图将一个项目添加到我的状态中的数组。但是，我收到以下错误：

对象作为React子对象无效（找到：带键的对象......）

我的github url代码，请帮忙。

class Tutorial2Screen extends Component {
   constructor(props) {
      super(props);
      this.state = {
         num: 0,
         name: "",
         arr: ["John", "Mary", "Steve"]
      };
   }

   addNameToArr(newName) {
      this.setState(prevState => ({
         arr: prevState.arr.concat(newName)
      }));
   }

输入＆amp;按钮代码：

<Input
   placeholder="Name"
   onChangeText={name => this.setState({ name })}
   value={this.state.name}
/>
</Item>

<Button
   block
   style={{ margin: 10 }}
   onPress={this.addNameToArr.bind(this)}
>

Answer 1

你必须这样做：

this.setState({
   arr:this.state.arr.concat(this.state.name);
})

或者您可以通过es6 spread语法使用它：

this.setState({
   arr:[...this.state.arr,this.state.name];
})

将newName更改为this.state.name因为您正在使用onchange处理程序更改this.state.name而不是newName

Answer 2

你在按下事件时使用Button绑定了“addNameToArr”方法，在“addNameToArr”方法中，第一个参数是你希望传入的“newName”（输入字段值）值。但是，当方法绑定时事件调用，因此您不会将文本输入值作为参数。

使用：

addNameToArr() {
  this.setState(prevState => ({
    arr: prevState.arr.concat(prevState.name)
}));

Answer 3

感谢您的帮助！您的意见帮助我找到了我的问题的解决方案。我通过添加括号并将参数直接传递给箭头函数来改变我的jsx代码并且它有效！ github包含有效的代码。

使用setState将名称添加到Array会产生错误

3 个答案: