React JS 没有格式化 JSON 代码答案

【问题标题】：React JS not formatting the JSON codeReact JS 没有格式化 JSON 代码
【发布时间】：2015-12-10 04:30:54
【问题描述】：

这是我的 React 代码，我想使用 React JS 以表格格式打印 JSON 格式代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Initial Data Via AJAX</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
      <body>
      <div id="example"></div>
          <script type="text/jsx">
              var ImageCollect = React.createClass({
                    getInitialState: function() {
                        return {
                          phpData: []
                        };
                    },
                     componentDidMount: function() {
                        $.get(this.props.source, function(result) {
                          var collection = result;//when i print this by using console.log the collection is getting the JSON code
                          if (this.isMounted()) {
                            this.setState({
                              phpData : collection
                           });
                          }
                        }.bind(this));
                    },
                   render:function()
                    {
                     DBdata = this.state.phpData || [];
                        return (
                            <div>
                              <table>
                                <th>name</th>
                                  <th>email</th>
                                {DBdata.map(function(d){
                                     return(
                                        <tr>
                                        <td>{d.name}</td>
                                        <td><d.email</td>                                     
                                        </tr>
                                     )}
                                )}
                              </table>
                            </div>

                    )}

              });

                React.render(
                <ImageCollect source="http://localhost/PHP-React-Demo/index.php" />,
                  document.getElementById('example')
                );

          </script>

      </body>
</html>

以下是我从 index.php 文件中获取的 JSON 格式代码，输出只有姓名和电子邮件

{"data":[{"id":"1","name":"param","email":"param@nadsoft.com","phone":"9890245130","marks":"65"},{"id":"2","name":"andy","email":"andy@gmail.com","phone":"9665815566","marks":"78"},{"id":"3","name":"asdf","email":"dfgfd@fgdfgd.com","phone":"2132323232","marks":"23"},{"id":"34","name":"rteret","email":"fdg@dfsdf","phone":"21312323232","marks":"23"},{"id":"4236","name":"kjhkj","email":"opiuio","phone":"9890245130","marks":"7"},{"id":"4237","name":"","email":"","phone":"","marks":"0"}]}

我可以更改 JSON 代码或反应吗？我应该在哪里改变，这个反应代码只返回姓名和电子邮件而不是数据。

【问题讨论】：

应该改成var collection = result.data吗？

标签： javascript json reactjs

【解决方案1】：

result 是字符串或对象（如果解析了 JSON，但我对此表示怀疑）。无论哪种方式，它都没有.map 方法。

如果result是一个包含JSON的字符串，你必须先把它解析成一个JavaScript对象：

var collection = JSON.parse(result);

您必须访问data 属性：

DBdata.data.map(...)

详细了解如何使用嵌套数据结构：Access / process (nested) objects, arrays or JSON

您的 JSX 代码也不正确。 <th> 元素必须在 <tr> 元素内。

【讨论】：

我已经尝试过这个 componentDidMount: function() { $.get(this.props.source, function(result) { var collection = JSON.parse(result); console.log(collection.数据); if (this.isMounted()) { this.setState({ phpData: collection }); } }.bind(this)); },.
输出是 [Object { id="1", name="param", email="param@nadsoft.com", more...}, Object { id="2", name ="andy", email="andy@gmail.com", 更多...}, 对象 { id="3", name="asdf", email="dfgfd@fgdfgd.com", 更多...} , 对象 { id="34", name="rteret", email="fdg@dfsdf", 更多...}, 对象 { id="4236", name="kjhkj", email="opiuio", 更多...}, Object { id="4237", markings="0", name="", more...}] 并出现错误：- TypeError: DBdata.data is undefined },
感谢它的工作我只是替换 phpData: collection.data