Question

我想映射（循环）JSON对象的每个属性。 JSON看起来像这样

[
  {
    "_id": "5ad5c0ccdec0fa2b3c1f1ba0",
    "name": "optioin",
    "job": "google",
    "location": "usa",
    "gender": "male",
    "__v": 0
  },
  {
    "_id": "5ad6043f9fba4125b467c6af",
    "name": "reactjs",
    "job": "facebook",
    "location": "california",
    "gender": "male",
    "__v": 0
  }
]

我希望将此JSON分配给我的reactjs状态我的组件看起来像这样

  componentDidMount() {
      fetch('/api/get/all').then((res)=>{
        return res.json();
      }).then(users =>{
          this.setState({
            user: users
          })
      });
      console.log(this.state.user);
  }

我已将用户状态初始化为

this.state={user:[]};

API正在从节点服务器响应，如此

app.get('/api/get/all',(req,res)=>{
    User.find({},(err,data) => {
      // res.json("inside this");
      if (err) {
        // console.error(err);
        res.json({
          message:"error"
        });
      }
      // console.log(data.toArray);

      res.json(data);
 });
});

我想获取每个JSON对象的每个值我的映射功能

<div className="row">

                {this.state.user.map(u =>{
                    <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />
                })}



            </div>

我得到的错误是

this.state.user.map is not a function

console.log（this.state.user）

的结果

（2）[{...}，{...}] 0：{_ id：“5ad5c0ccdec0fa2b3c1f1ba0”，名称：“optioin”，工作：“pubg”，位置：“usa”，性别：“男性”，...} 1：{_ id：“5ad6043f9fba4125b467c6af”，名称：“reactjs”，工作：“facebook”，位置：“california”，性别：“男性”，...}长度：2__proto__：数组（0）

提前致谢

Answer 1

您没有正确设置状态以响应您的API调用，您需要编写this.setState({user: users})而不是this.setState({user: u})

componentDidMount() {
      fetch('/api/get/all').then((res)=>{
        return res.json();
      }).then(users =>{
          this.setState({
            user: users
          })
      });
      // console.log(this.state.user);  <-- This won't show update state since setState is asynchronous
  }

注意：您可以在setState being asynchronous

的更多详细信息中查看此答案

如何在javascript中映射json对象？

1 个答案: