Question

我正在尝试在我的React项目中使用来自API（https://messi.hyyravintolat.fi/publicapi/restaurant/11/）的数据。我能够从API中呈现每个“日期”，但是如何使用这种类型的.json（API中“数据”数组中的那些）中的每个“日期”呈现每个“名称”？

{item.data [name]}

似乎不是这样做的方法。这是我用来获取和呈现数据的组件类：

import React from 'react';
    /*eslint-env jquery*/

class TestMenu extends React.Component {
  constructor(props) {
    super(props);

    this.state = { food: [] };
  }

  componentDidMount() {
    this.UserList();
  }

  UserList() {
    $.getJSON('https://messi.hyyravintolat.fi/publicapi/restaurant/11/')
      .then(({ data }) => this.setState({ food: data }));
  }

  render() {
    const foods = this.state.food.map((item, i) => (
      <div>
        <h1>{item.date}</h1>
        <p>{item.data[name]}</p>
      </div>
    ));
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{foods}</div>
      </div>
    );
  }

}

export default TestMenu;

Answer 1

那是因为你需要第二个循环data（嵌套的循环）是一个数组而不是一个对象。
使用数据结构循环的一个简单示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    };
  }

  componentDidMount() {
    axios
      .get("https://messi.hyyravintolat.fi/publicapi/restaurant/11/")
      .then(({ data }) => {
        this.setState({
          list: data.data
        });
      });
  }

  render() {
    const { list } = this.state;
    return (
      <div>
        <ul>
          {
            list && list.map((obj) => {
              return (
                <li className="item">
                  <div className="date">
                    <span>Date: </span> <span>{obj.date}</span>
                  </div>
                  <div className="names">
                    {
                      obj.data.map((obj2) => {
                        return (
                          <div className="name">
                            <span>Name: </span> <span>{obj2.name}</span>
                          </div>
                        )
                      })
                    }
                  </div>
                </li>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.item {
  list-style: none;
  border: 1px solid #ccc;
  padding: 10px;
}

.date {
  font-weight: bold;
}

.names {
  text-indent: 15px;
}

.name{
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<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="root"></div>

Answer 2

查看数据源后，JSON的形状如下：

[
  {
    "date": some date,
    "data": [
      {
        "name": some name,
        ...
      },
      {
        "name": some other name,
        ...
      }
      ...
    ]
  },
  {
    "date": some other date,
    "data": [ ... ]
  },
  ...
]

因此，单个日期有多个名称。您可以像下面这样呈现：

<h1>{item.date}</h1>
<ul>
  {item.data.map((d, idx) => {
    return <li key={idx}>{d.name}</li>
  )}
</ul>

请注意，我还在映射数据时使用索引，以便为每个key元素提供唯一的<li>到React。

如何使用JavaScript访问从.json映射的数据中的对象值？

2 个答案: