Question

州：

 constructor(props) {
    super(props);
    this.state = {
        id: [],name:[]

取：

componentDidMount() {
    axios.get('some_api')
        .then(res => {
            let x = res.data.results.map(obj => obj.id);
            let y = res.data.results.map(obj => obj.full_name);
            this.setState({id: x});
            this.setState({name: y});
})
}

渲染：

{this.state(i need to map both id and name here).map((item=>{
                        return(
                            <tbody>
                            <tr>
                                <td style={{textAlign:'center'}}><Checkbox/></td>
                                <td style={{textAlign:'center'}}>{item.id}</td>
                                <td style={{textAlign:'center'}}>{item.full_name}</td>
                            </tr>
                            </tbody>)
                }))}

我可以从一个对象属性中获取值，但不是全部。数据采用以下格式：

"results": [
{
  "id": 25,
  "full_name": "William Lane",
  "email": "staff_24@trash-mail.com",
  "username": "staff_24"
},
{
  "id": 26,
  "full_name": "Christine Thompson",
  "email": "staff_25@trash-mail.com",
  "username": "staff_25"
}

我必须将其返回到表格中，如上面的代码所示。

Answer 1

看看这个例子来获取你所有的github回购：

import React, { Component } from 'react'
import axios from 'axios'
import Checkbox from '@material-ui/core/Checkbox'

class MyGitHubRepos extends Component {
  state = {
    data: []
  }

  componentDidMount() {
    const user = '<YOUR_USER>'
    axios.get(`https://api.github.com/users/${user}/repos`)
      .then(res => {
        const data = res.data
        this.setState({ data })
    })
  }

  cell = content =>
    <td style={{textAlign: 'center'}}>
      {content}
    </td>

  render() {
    return (
      <table>
        <tbody>
          {this.state.data.map(item=> (
            <tr key={item.id}>
              {this.cell(<Checkbox/>)}
              {this.cell(item.id)}
              {this.cell(item.name)}
            </tr>
          ))}
        </tbody>
      </table>
    )
  }
}

export default MyGitHubRepos

查看获取数据的方式（res中componentDidMount的形状）。您的数据应保存在一个数组中（没有两个带有ID和名称的数组），这是有点难以理解。并且，如果需要，创建一个函数来渲染单元格以避免重复代码。

我希望它可以帮到你。

Answer 2

你可以试试这个。

  class Test extends Component {

      constructor(props) {
        super(props);
        this.state = {
            tableData:[]
        };
      }


      componentDidMount() {
        axios.get('some_api')
          .then(res => {
             this.setState({
               tableData: res.data.results
             })
          })
      }

      render() {
       <div>
        <table>
         <tbody>
         {this.state.tableData.map((item,i)=>
          <tr id={i}>
            <td style={{textAlign:'center'}}><Checkbox/></td>
            <td style={{textAlign:'center'}}>{item.id}</td>
            <td style={{textAlign:'center'}}>{item.full_name}</td>
          </tr>
         )}
         </tbody>
        <table>
       </div>
      }

    }

如何在ReactJS中分别映射表中的多个对象属性？

2 个答案: