Javascript React JS-迭代外部JSON文件以填充表

我是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;

类GetUnassignedUsers扩展React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
};
}
组件安装（）{
取回（“http://localhost/dashboard/?action=unassignedUsers.getUnassingedUsers", {
凭据：“相同来源”
})
.then（response=>response.json（））
.then（json=>this.setState（{data:json}））；
}
渲染（）{
log（“teams”，this.state.data.teams）；
log（“unassignedUsers”，this.state.data.unassignedUsers）；
var teams=this.state.data.teams；
var unassignedUsers=this.state.data.unassignedUsers；
返回(
{unassignedUsers.ID}
23/08/2015
商标
name@tradeprint.co.uk
约翰·布洛格斯
阿伯费尔迪
AD9 8QR
未分配
);
}
};
导出默认GetUnassignedClient；

我正在访问JSON并在2个控制台日志（

console.log（“teams”，this.state.data.teams）；

和

console.log（“unassignedUsers”，this.state.data.unassignedUsers）；

）中的render方法中返回它

---

下面是我的问题，我通过为团队和未分配者声明2个变量来整理点符号。然后，在我的返回中，我想为每个JSON记录生成一行，第一行中有unassignedUser ID。在您的情况下，我将使用现有组件，比如作为一个伟大的开始

import React from "react";
import ReactDOM from "react-dom";;
import Reactable from "reactable";
var Table = Reactable.Table;
ReactDOM.render(
    <Table className="table" data={[
        { Name: 'Griffin Smith', Age: 18 , Position: 'Schoolar'},
        { Age: 23,  Name: 'Lee Salminen', Position: 'Student'},
        { Age: 28, Name: 'Mike Kofs', Position: 'Developer' },
    ]} />,
    document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；；
从“Reactable”导入Reactable；
var Table=可反应的.Table；
ReactDOM.render(
,
document.getElementById（'app'）
);

在您的情况下，我会使用现有的组件，比如作为一个伟大的开端

import React from "react";
import ReactDOM from "react-dom";;
import Reactable from "reactable";
var Table = Reactable.Table;
ReactDOM.render(
    <Table className="table" data={[
        { Name: 'Griffin Smith', Age: 18 , Position: 'Schoolar'},
        { Age: 23,  Name: 'Lee Salminen', Position: 'Student'},
        { Age: 28, Name: 'Mike Kofs', Position: 'Developer' },
    ]} />,
    document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；；
从“Reactable”导入Reactable；
var Table=可反应的.Table；
ReactDOM.render(
,
document.getElementById（'app'）
);

要动态创建表行，需要迭代json并创建ui项，如下所示：

return (
   <table>
     <tbody>
      {unassignedUsers.map((item,index)=>{
        return <tr key={index}>
            <td>
                {item.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>
      })  
     </tbody> 
   </table> 
);

返回(
{unassignedUsers.map（（项，索引）=>{
返回
{item.ID}
23/08/2015
商标
name@tradeprint.co.uk
约翰·布洛格斯
阿伯费尔迪
AD9 8QR
未分配
})  
);

要动态创建表行，需要迭代json并创建ui项，如下所示：

return (
   <table>
     <tbody>
      {unassignedUsers.map((item,index)=>{
        return <tr key={index}>
            <td>
                {item.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>
      })  
     </tbody> 
   </table> 
);

返回(
{unassignedUsers.map（（项，索引）=>{
返回
{item.ID}
23/08/2015
商标
name@tradeprint.co.uk
约翰·布洛格斯
阿伯费尔迪
AD9 8QR
未分配
})  
);

因此，你所要做的就是：

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

var rows=unassignedUsers.map（函数（用户）{
返回(
{user.ID}
{user.somethingElse}
)
});
返回(
{rows}
)

因此，你所要做的就是：

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

var rows=unassignedUsers.map（函数（用户）{
返回(
{user.ID}
{user.somethingElse}
)
});
返回(
{rows}
)

可能重复的问题我看了这个问题，但它似乎与我的问题完全不同，尽管标题相似。他们的代码编写方式完全不同。这个问题使用ES6，因此仅此一个问题就有很大的不同。此外，他们访问存储在变量中的JSON，而不是在bei后保存到状态ng从外部源获取。我看过这个问题的可能副本，但尽管标题相似，但它似乎与我的完全不同。他们的代码编写方式完全不同。这个问题使用ES6，因此仅此一点就有很大的不同。此外，他们访问存储在变量和从外部源获取后未保存到状态。是的，它返回一个用户数组。我已经实现了这一点，现在我得到了错误：Uncaught TypeError:无法读取未定义的属性“map”。我认为这是由于componentDidMount在尝试（并失败）后运行所致第一次渲染-但是第二次它会重新渲染，因此肯定会返回数据？因为您定义了如下初始状态：this.state={data:[]}；但是您没有将数据用作数组，而是将数据用作对象，并且在此对象内，您必须为未分配的用户提供默认值，因此this.state={数据：{未分配用户：[]}；如果在第一次渲染中这样定义初始状态，unassignedUsers将映射为空数组，因此不会出现任何意外错误。是的，它返回一个用户数组。我已经实现了这一点，现在我得到了错误：Uncaught TypeError:无法读取undefined的属性“map”，我认为这是由于componentDidMount在它试图（但失败）重新启动