Question

我发出了一个Ajax请求，它返回一个像这样的对象：

obj1_b

如何将此对象存储在组件的状态中，因为以下任何一个都无效：

Object { user1: "darkblue", user2: "darkred" }

哪种语法用于存储对象？

Answer 1

要将任何变量初始化为object，请按以下方式编写：

this.state = { usersColors: {} }

获得响应后，使用setState更新状态，如下所示：

this.setState({usersColors: response})

现在您可以通过以下方式访问响应值：

this.state.usersColors.user1   ---->   "darkblue"

this.state.usersColors.user2   ---->   "darkred"

<强>更新

检查此代码段：

let state = {
   userColors: {
      user1: 'red',
      user2: 'blue'
   }
}

let username = 'user1';

console.log('user1 value = ', state.userColors[username]);

Answer 2

除了类构造函数之外，不应该在任何地方使用this.state = ...。相反，请使用this.setState({usersColors: {myObj: foo, etc: bar}})一个警告：不要在this.setState方法中使用render()，否则您将收到错误。

Answer 3

如何将将成为同一数组对象一部分的不同html元素映射到组件状态中的对象。就像我跟随两个属于单个对象用户的html元素一样

<div className="form-group">
        <input
          className="form-control"
          type="text"
          name="user[username]"
          value={this.state.user.username}
          onChange={this.onChange}
          placeholder="Customer Name"
        />
      </div>
      <div className="form-group">
        <input
          className="form-control"
          type="text"
          name="user[mobilenumber]"
          value={this.state.user.mobilenumber}
          onChange={this.onChange}
          placeholder="Customer mbole no."
        />
      </div>

我应该为这两个元素赋予什么名称，使它们映射到构造函数中存在的状态的用户对象

this.state = {
 user: { username: "", mobilenumber: "" },
 clothname: "",
 description: "",
 errors: {}
 };

使用以下简单的onChange函数

onChange(event) {
 this.setState({ [event.target.name]: event.target.value });
}

如何在组件的状态中存储对象？

3 个答案: