javascript - React JS - 迭代外部 JSON 文件来填充表

Question

我是 React 世界的新手，正在努力让我的 JSON 数据显示在表格中。

class GetUnassignedUsers extends React.Component {
    constructor () {
        super();
        this.state = {
            data:[]
        };
    }
    componentDidMount () {
        fetch("http://localhost/dashboard/?action=unassignedUsers.getUnassingedUsers", {
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(json => this.setState({data: json}));
    }
    render () {
        console.log("teams", this.state.data.teams);
        console.log("unassignedUsers", this.state.data.unassignedUsers);
        var teams = this.state.data.teams;
        var unassignedUsers = this.state.data.unassignedUsers;
        return (
            <tr>
                <td>
                    {unassignedUsers.ID}
                </td>
                <td>
                    23/08/2015
                </td>
                <td>
                    Tradeprint
                </td>
                <td>
                    name@tradeprint.co.uk
                </td>
                <td>
                    John Bloggs
                </td>
                <td>
                    Aberfeldy
                </td>
                <td>
                    AD9 8QR
                </td>
                <td>
                    Unassigned
                </td>
            </tr>
        );
    }
};

export default GetUnassignedClients;

我正在访问 JSON 并在 2 个控制台日志( console.log("teams", this.state.data.teams); 和 console.log("unassignedUsers", this.state.data.unassignedUsers); )的渲染方法中返回它。

我的问题如下，我通过声明团队和未分配用户的 2 个变量来整理点符号。然后在我的返回中，我想为每个 JSON 记录生成一行，其中第一个 <td> 中包含未分配的用户 ID .

Answer 1

var unassignedUsers = this.state.data.unassignedUsers; // Probably it returns array of users

所以你所要做的就是:

var rows = unassignedUsers.map(function(user) {
    return (<tr>
        <td>{user.ID}</td>
        <td>{user.somethingElse}</td>
      </tr>)
});
return (
   <table>
   <tbody>
       {rows}
   </tbody>
   </table>
)