使用React中的循环从JSON数组中获取数据并根据数据设置状态

Getting data from a JSON array and setting states based on the data using loop in React

本文关键字：数据 设置 状态 获取 数组 React 循环 JSON 使用      更新时间：2023-09-26

假设我正在获取JSON数组，并且在组件中获取该数组时想要setState。

        for( var follower_id = 0; follower_id < followers_data.length; follower_id++) {
          this.setState({
            followers_data_username[followers_data_username.length] = followers_data[follower_id].login
          });
          console.log(followers_data_username[0]);
        }

但是，如果要使用数组，我不知道如何设置getInitialState。此外，我认为我不能setState一个数组。

我是React的新手。因此，任何帮助或指向正确方向的人都将不胜感激。

将JSON视为类似于以下内容：https://api.github.com/users/ghoshnirmalya/followers

您应该在数据上使用映射函数，如

render(){
    let rows = this.state.followers_data.map( (follower, i) => <TableRow follower={follower} key={i} />);
    return (
        <table>
            <tbody>{rows}</tbody>
        </table>
    );
}

你的行组件看起来像这样。。

const TableRow = (props) => {
    return (
        <tr>
            <td>{this.props.follower.login}</td>
        </tr>
    );
};

现在这只是一个基本的例子。。。你需要为你的项目建模。。但是对于所有json数据，您应该遵循此模式。。。你有一个表，在tbody中渲染行。。它是从数组中的每个json对象生成的组件数组。

相关文章：