REACT JS：映射要在 JSX 中呈现的对象数组
Posted
技术标签:
【中文标题】REACT JS：映射要在 JSX 中呈现的对象数组【英文标题】：REACT JS: Map over an array of objects to render in JSX 【发布时间】：2017-01-02 04:24:30 【问题描述】：我是 React JS 的新手问题是我需要在这段代码中显示我数据库中的所有字段。我已经能够在浏览器控制台中以对象的形式获取所有数据，并且能够在浏览器中查看数组中的最后一条数据，但无法查看它们。请原谅我的代码格式错误，因为我是新手。在此先感谢.....
输出和代码
浏览器视图： Land of Toys Inc. 是名称 131 是 ID
JSON 数据：
"posts":[
"id":"103","name":"Atelier graphique",
"id":"112","name":"Signal Gift Stores",
"id":"114","name":"Australian Collectors, Co.",
"id":"119","name":"La Rochelle Gifts",
"id":"121","name":"Baane Mini Imports",
"id":"124","name":"Mini Gifts Distributors Ltd.",
"id":"125","name":"Havel & Zbyszek Co",
"id":"128","name":"Blauer See Auto, Co.",
"id":"129","name":"Mini Wheels Co.",
"id":"131","name":"Land of Toys Inc."
]
此数据是通过编写为插件的 php 代码获得的，该插件采用 JS 代码中给出的 url 形式
http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass(
getInitialState: function()
return
username:[],
companyID:[]
;
,
componentDidMount: function()
var rows = [];
this.serverRequest = $.get(this.props.source, function (result)
for (var i=0; i < 10; i++)
var lastGist = result.posts[i];
//console.log(result.posts[i]);
this.setState(
username: lastGist.id,
companyID: lastGist.name
);
.bind(this));
,
componentWillUnmount: function()
this.serverRequest.abort();
,
render: function()
return (
<li>this.state.companyID is the name this.state.username is the ID</li>
);
);
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：使用地图呈现您的数据。并将 json 作为 javascript 对象存储在状态本身而不是两个单独的数组中。
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass(
getInitialState: function()
return
data: ["id":"103","name":"Atelier graphique",
"id":"112","name":"Signal Gift Stores",
"id":"114","name":"Australian Collectors, Co.",
"id":"119","name":"La Rochelle Gifts",
"id":"121","name":"Baane Mini Imports",
"id":"124","name":"Mini Gifts Distributors Ltd.",
"id":"125","name":"Havel & Zbyszek Co",
"id":"128","name":"Blauer See Auto, Co.",
"id":"129","name":"Mini Wheels Co.",
"id":"131","name":"Land of Toys Inc."]
;
,
componentDidMount: function()
,
componentWillUnmount: function()
this.serverRequest.abort();
,
render: function()
return (
<div>
this.state.data.map(function(item, index)
return <li>item.name is the company name, item.id is the ID</li>
)</div>
);
);
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</html>
JSFIDDLE
对于小提琴示例，我删除了 componentDidMount 中的 $.get() 代码。
附：将状态数组数据创建为对象数组，如 小提琴示例
【讨论】：
我尝试使用 map 来渲染它，但它创建了一个错误，说它是未定义的，这会破坏您的解决方案并回复您，感谢您的帮助 @AkshayVenugopal 什么是未定义的 它可以工作，但我需要像 API 一样使用它，所以我应该如何处理这里的 JSON 数据在代码中给出，我需要从像 phpmyadmin 这样的数据库中使用它 同时弹出警告 "警告：数组或迭代器中的每个子节点都应该有一个唯一的"key" prop。检查UserGist. in li (UserGist 创建) in UserGist 中的渲染方法"【参考方案2】：
我想它会帮助你。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass(
getInitialState: function()
return
username:[],
companyID:[]
;
,
componentDidMount: function()
var rows = [];
this.serverRequest = $.get(this.props.source, function (result)
var username = [];
var companyID = [];
for (var i=0; i < 10; i++)
var lastGist = result.posts[i];
//console.log(result.posts[i]);
username.push(lastGist.id);
companyID.push(lastGist.name);
this.setState(
username: username,
companyID: companyID,
);
.bind(this));
,
componentWillUnmount: function()
this.serverRequest.abort();
,
render: function()
return (
<div>
this.state.companyID.map(function(item, index)
return <li>item is the company name, this.state.username[index] is the ID</li>
)</div>
);
);
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</body>
</html>
【讨论】：
TypeError: 这是未定义的 singleList() render() browser.min.js%20line%203%20%3E%20Function:52 [36]() react.js: 6614 [36]() react.js:6641 [36]() 你能描述一下错误吗？行号：？？？让我看看。 不看。我已经编辑过了。希望它会起作用。以上是关于REACT JS：映射要在 JSX 中呈现的对象数组的主要内容，如果未能解决你的问题，请参考以下文章