通过对象 &render 反应迭代

Question

class PortfolioDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      portfolio: [],
      PF: []
    };
  }

  componentWillMount() {
    var params = new URLSearchParams();

    params.append("post_id", this.props.postID);
    params.append("getportfolio", 1);

    var self = this;
    axios
      .get(this.props.dataURL, { params })
      .then(function(response) {
        self.setState({
          portfolio: {
            title: response.data[0].title,
            data: response.data
          },
          PF: response.data
        });
      })
      .catch(function(error) {});
  }

  componentDidUpdate() {

  }


  render() {
    console.log(this.state.PF);
    const portfolioQuals = Object.keys(this.state.PF).map(function(key) {
        var item = this.state.PF[key];
        console.log(key);
        return (
          <tr key={key}>
            <td>test</td>
            <td>test</td>
          </tr>
        );
    });
    return (
      <div className="container">
        <h1>
          {this.state.portfolio.title}
        </h1>
        <table className="table table-bordered table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            {portfolioQuals}
          </tbody>
        </table>
      </div>
    );
  }
}

如何遍历对象并将其呈现在下面。我的 const 坏了，什么也没显示。我已经尝试了一切——Object.keys、Object.map、for..in——没有任何帮助。我从 json 服务器得到了非常具体的响应，有人能给我一个方向吗？ 这是 JSON 结构

{
0: {
"title": "Awesome title"
},
"_stp_postmeta_form_of_participation": [
  "Awesome text"
],
"_stp_postmeta_result": [
  "Awesome text "
],
"_stp_postmeta_description_of_the_event": [
  "Awesome text"
],
"_stp_postmeta_year_of_holding_receipt": [
  "09.04.2016"
],
"_stp_postmeta_type_of_event_organization": [
  "Awesome text"
],
"_thumbnail_id": [
  "116243"
],
"_stp_postmeta_document_individual": [
  "/files/portfolio/stud002240804/54524dd19f48d90c1bb0a46751f05d6b.jpg"
],
"_stp_approved_individual": [
  "1"
],
"_stp_approved_documents_education": [
  "1"
],
"_stp_approved_document_professional": [
  "1"
],
"_stp_approved_document_scientific": [
  "1"
],
"_stp_approved_documents_learning": [
  "1"
],
"_stp_approved_document_promotion": [
  "1"
],
"_stp_approved_document_publication": [
  "1"
],
"_stp_approved_document_seniority": [
  "1"
],
}

Answer 1

您需要将map 与Object.keys 结合使用，然后使用instanceof 检查对象值是否是一个数组，然后如果您只需要一个数组的第一个值，则返回该数组的第一个值，否则再次映射它。

class App extends React.Component {
   data = {
    0: {
    "title": "Awesome title"
    },
    "_stp_postmeta_form_of_participation": [
      "Awesome text"
    ],
    "_stp_postmeta_result": [
      "Awesome text "
    ],
    "_stp_postmeta_description_of_the_event": [
      "Awesome text"
    ],
    "_stp_postmeta_year_of_holding_receipt": [
      "09.04.2016"
    ],
    "_stp_postmeta_type_of_event_organization": [
      "Awesome text"
    ],
    "_thumbnail_id": [
      "116243"
    ],
    "_stp_postmeta_document_individual": [
      "/files/portfolio/stud002240804/54524dd19f48d90c1bb0a46751f05d6b.jpg"
    ],
    "_stp_approved_individual": [
      "1"
    ],
    "_stp_approved_documents_education": [
      "1"
    ],
    "_stp_approved_document_professional": [
      "1"
    ],
    "_stp_approved_document_scientific": [
      "1"
    ],
    "_stp_approved_documents_learning": [
      "1"
    ],
    "_stp_approved_document_promotion": [
      "1"
    ],
    "_stp_approved_document_publication": [
      "1"
    ],
    "_stp_approved_document_seniority": [
      "1"
    ],
    }
    render() {
        return (
            <table>
              {Object.keys(this.data).map((key, index) => {
                  if( this.data[key] instanceof Array) {
                  return (
                      <tr key={key}>
                         <td>{key}</td>
                         <td>{this.data[key][0]}</td>
                      </tr>
                  )
                  }
                  return null;
              })}
            </table>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

我刚刚创建了一个 JSX6 方法，并在那里实现了所有的魔法

 iterateData(json) {

    var iter = [];
    for (var key in json) {
      console.log(key);
      console.log(json[key]);
      iter.push(
        <tr key={key}>
          <td>{key}</td>
          <td>{json[key]}</td>
        </tr>
      );
    }
    return iter;
  }

return (
  <div className="container">
    <h1>
      {this.state.portfolio.title}
    </h1>
    <table className="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {this.iterateData(this.state.PF)}
      </tbody>
    </table>
  </div>
);