Question

我想将rest api数据提取到react表中。我该怎么设置反应表中的行数据来自获取的值 componentDidMount()？

以下是我的示例代码：

constructor() {
  super();
  this.state = {
    data: [],
  }
}
componentDidMount() {
  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}/>)
  })
}

Answer 1

终于找到了答案......但我没有使用反应表......我无法找到它的答案..相反，我使用普通的Html表..这不是我的问题的正确答案..但考虑到它对我发布这个答案的人有用...

constructor() {
    super();
    this.state = {
        data: [],
    }
}
componentDidMount() {
    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 for fetching api values inside table

我无法在React表中设置setState，但是在这里，由于我们完全定义了表数据的api，因此更容易定义api。所以我确实为表定义了一个默认结构，然后通过使用数据映射函数，我动态地在表行中插入值。因此，它对于根据需要创建动态数量的行也很有用。使用HTML表的唯一缺点是我们必须定义表谎言的进一步功能，但在React表中有预定义的功能可以使用。

如果有人能给出在React Table中获取api值的答案，那就更有用了。

谢谢。

Answer 2

看起来这里有语法错误。

您可以使用<ReactTable data={data} column={columns} />并查看它是否有效吗？

有没有办法获取API以反应js中的反应表？

2 个答案: