javascript - Is there a way to fetch API to react table in react js? - Stack Overflow

admin管理员组

文章数量:1416651

I want to fetch an rest api data into the react table. How do I set the row data inside the react table from the value that is got in ponentDidMount()?

Following is my sample code:

constructor() {
  super();
  this.state = {
    data: [],
  }
}
ponentDidMount() {
  fetch('.json').then((Response) => Response.json()).
  then((findresponse) => {
    console.log(findresponse.movies)
    this.setState({
      data: findresponse.movies
    })
  })
}


render() {
  this.state.data.map((dynamicData, key) => {
      const data = [{
          name: {
            this.dynaimcData.title
          },
          age: {
            this.dynamicData.releaseYear
          }]
      })

    const columns = [{
        Header: 'Name',
        accessor: 'name'
      },
      {
        Header: 'Age',
        accessor: 'age'
      }
    ]

    return (<ReactTable data: {data} column: {columns}/>)
  })
}

I want to fetch an rest api data into the react table. How do I set the row data inside the react table from the value that is got in ponentDidMount()?

Following is my sample code:

constructor() {
  super();
  this.state = {
    data: [],
  }
}
ponentDidMount() {
  fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()).
  then((findresponse) => {
    console.log(findresponse.movies)
    this.setState({
      data: findresponse.movies
    })
  })
}


render() {
  this.state.data.map((dynamicData, key) => {
      const data = [{
          name: {
            this.dynaimcData.title
          },
          age: {
            this.dynamicData.releaseYear
          }]
      })

    const columns = [{
        Header: 'Name',
        accessor: 'name'
      },
      {
        Header: 'Age',
        accessor: 'age'
      }
    ]

    return (<ReactTable data: {data} column: {columns}/>)
  })
}

• javascript
• reactjs
• fetch-api

Share Improve this question Follow edited Oct 9, 2017 at 10:25 Rajesh 25k55 gold badges5050 silver badges8383 bronze badges asked Oct 9, 2017 at 10:20 ShibuShibu 18122 gold badges33 silver badges1414 bronze badges 2

• 1 Should data:{data} not be data={data}? – Rajesh Commented Oct 9, 2017 at 10:22
• and this.state.data.map((dynamicData, key) => {...} should be inside return. You haven't written return statement inside render. – Narasimha Reddy - Geeker Commented Oct 9, 2017 at 10:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

At last found the answer... but I didn't use the react table... I wasn't able to find the answer for it.. Instead I used the ordinary Html table.. This isn't the proper answer for my question.. but considering it will be useful for someone I'm posting this answer...

constructor() {
    super();
    this.state = {
        data: [],
    }
}
ponentDidMount() {
    fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()).
            then((findresponse) =>
            {
                console.log(findresponse.movies)
                this.setState({
                    data: findresponse.movies
                })
            })
}
render()
{


    return(
            <table className="tat"> 
    <tr><th>name</th><th>year</th></tr>
        {
                this.state.data.map((dynamicData) =>
            <tr className="trow"> <td>  {dynamicData.title} 
        </td> <td> {dynamicData.releaseYear} </td>
                                </tr>
                               ) }
                        </table>


            )
}

Output:

Output for fetching api values inside table

I wasn't able to setState in the React table but in here it's a little easy to define the api for the table data a little easier since its fully defined by us. So I did defined a default structure for the table and then by using the data map function I'm inserting the values inside the table row dynamically. So its also useful for creating dynamic amount of rows as per needed. The only disadvantage of using the HTML table is that we have to define the further functionalities of the table lie sorting but in the React table there are pre-defined functionalities which could be used.

If anyone could give the answer for fetching the api values inside the React Table it would be more useful.

Thank you.

Looks like there is a syntax error in this.

Can you use <ReactTable data={data} column={columns} /> and see if it works?

本文标签： javascriptIs there a way to fetch API to react table in react jsStack Overflow