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

【问题标题】：Getting data from a JSON array and setting states based on the data using loop in React在 React 中使用循环从 JSON 数组中获取数据并根据数据设置状态
【发布时间】：2015-11-11 07:51:25
【问题描述】：

假设，我正在获取 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

【问题讨论】：

为什么要为 json 数组中的每个元素设置状态？那只是要覆盖上一行中的任何数据...您是否要在前端列出一个表？
是的。我正在尝试从 json 中获取所有数据并列出一个表格。最好的方法是什么？
这是 es6 语法吗？你看过反应示例吗？
我正在尝试遵循 react 教程 (facebook.github.io/react/docs/tutorial.html) 中提供的语法。

标签： javascript arrays json reactjs

【解决方案1】：

您应该像这样在数据上使用地图功能

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 中rows.. 这是一个组件数组，由数组中的每个 json 对象生成。

【讨论】：

如果我使用 onClick 函数从另一个 url 加载 JSON 怎么办？这也适用于那种情况吗？
@NirmalyaGhosh 是的，这就是我希望你拥有的......你的 onClick 函数应该调用this.setState({followers_data: whatever_your_data_is})，它将使用返回的任何数据重新呈现行