Question

我从服务

获取这样的Json对象

{"0":{"UserID":1,"Gender":"F","Age":1,"Occupation":10,"Zip-code":48067},
"1":{"UserID":2,"Gender":"M","Age":56,"Occupation":16,"Zip-code":70072},
"2":{"UserID":3,"Gender":"M","Age":25,"Occupation":15,"Zip-code":55117},
"3":{"UserID":4,"Gender":"M","Age":45,"Occupation":7,"Zip-code":2460},"4":}

然后使用React我试图将它映射到一个状态，但它是一个对象而不是一个对象数组

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: []
    }
  }
  componentDidMount() {
    this.getUsers();
  };

  getUsers() {

    axios.get(`${SERVICE_URL}/users`)
    .then((res) => { 
      console.log(res.data); // I can see the data in the console
      this.setState({ users: res.data.map((data) => {return (data.key, data.value)} }); })
    .catch((err) => { console.log(err); });
  }

我虽然这样的事情可能有用，但没有。

this.setState（{users：res.data.ToArray（）。map（（data）=＆gt; {return （data.key，data.value）}）}）}）

最后更新，这是有效的。（可能仍然更干净，但这有效）

    class App extends Component {
    constructor() {
      super();
      this.state = {
        users: []
      }
    }
    componentDidMount() {
      this.getUsers();      
    };

    getUsers() {      
      axios.get(`${SERVICE_URL}/users`)
      .then((res) => {  

        this.setState({ users: Object.values(JSON.parse(res.data))});

       })   
      .catch((err) => { console.log(err); });
    }

  render() {

    return (
     <div>
     <table class='userList'> 
        <tr> 
            <td>UserId</td>
            <td>Gender</td>
            <td>Age</td>
            <td>Occupation</td>
        </tr>        

            {this.state.users.map(({UserID, Gender, Age, Occupation}) => {
              return (
                <tr key={'user'+UserID}>
                    <td> { UserID } </td>
                    <td> { Gender } </td>
                    <td> { Age } </td>
                    <td> { Occupation } </td>              
              </tr>
            )})}
        </table>
      </div>
    );
  }
}

export default App;

Answer 1

尝试在使用JSON.parse（res）之前解析它，然后您可以像设置状态那样映射数组

Answer 2

您可以使用update customers set name = trim(name, chr(160)) method来迭代对象键。

所以你可以做类似的事情：

Object.keys()将被评估为一组值。

如果您根本不在乎您的密钥，可以使用Object.keys(res.data).map(id => res.data[id]) method

Answer 3

据我所知，您的问题是您有object作为输入，您需要将其转换为array并将其设置为变量。您可以使用Object.values

this.setState({ users: Object.values(res.data)});

修改

您可以改进代码，如下所示

this.setState({ users: Object.values(res.data)}); {this.state.users.map(([UserID, Gender, Age, Occupation, ...rest]) => { return ( <tr> <td> { UserID] } </td> <td> { Gender } </td> <td> { Age } </td> <td> { Occupation } </td> <td> { rest['Zip-Code'] } </td> </tr> ) })}

如何使用React从json对象创建一个列表

3 个答案: