javascript - React 中循环对象数组的问题

Question

我有一个 json 文件:

{"places":[{"id":"1","name":"Balzac's Niagara On-The-Lake","logo_url":"http://example.com/store_images/new_82.jpg","website_url":"http://www.example.com","hours":{"monday":"07:00 AM - 07:00 PM","tuesday":"07:00 AM - 07:00 PM"}},{"id":"2","name":"Balzac's Port,"logo_url":"http://example.com/images.jpg","website_url":"http://www.example.com","hours":{"monday":"07:00 AM - 07:00 PM","tuesday":"07:00 AM - 07:00 PM"}}]}

尝试在浏览器上循环并渲染项目。这是我的代码:

 class Dashboard extends Component {
  state = {
    data: ''
  };
  componentDidMount() {
    axios
      .get(url)
      .then(resp => resp.data)
      .then(data => {
        this.setState({ data });
        //console.log(data.places[0].id);
        console.log(data.places.length);
      })
      .catch(err => console.log(err));
  }

  render() {
    const { data } = this.state;

    let content;

    for (let i in data.places) {
      console.log(data.places[i].name);
      content = <div>{data.places[i].name}</div>;
    }
    return (
      <div className="container">
        <h3>{content}</h3>
      </div>
    );
  }
}

我可以在控制台中看到所有项目，但在 UI 页面上看不到。

Answer 1

您遇到了很多问题。首先，代码不完整。因此，这没有希望发挥作用。

接下来，您有一个位置数组而不是对象，因此您不能使用 for-in环形。您需要映射这些以生成适当的标记。 See MDN for iterating over various data structures .

此外，请勿将 state.data 初始化为空字符串。如果您的代码没有强类型化，那么至少提供一个关于最终类型的指示是很好的。例如，您可以在这里提供一个空对象 ({}) 或 null。将其设置为空字符串 ('') 会产生误导。

最后，您提供的 JSON 无效。确保您的实际数据源正确。这里，这意味着更正第二个字段的 name 属性上缺少的双引号:"name": "Balzac's Port"。有several online tools用于 JSON 验证。

我在这里使用 setTimeout 模拟了异步 XHR 事件，但想法是相同的:

function simulateXhr() {
  return new Promise(resolve => {
    setTimeout(() => {
      return resolve({
        places: [
          {
            id: "1",
            name: "Balzac's Niagara On-The-Lake",
            logo_url: "http://example.com/store_images/new_82.jpg",
            website_url: "http://www.example.com",
            hours: {
              monday: "07:00 AM - 07:00 PM",
              tuesday: "07:00 AM - 07:00 PM"
            }
          },
          {
            id: "2",
            name: "Balzac's Port",
            logo_url: "http://example.com/images.jpg",
            website_url: "http://www.example.com",
            hours: {
              monday: "07:00 AM - 07:00 PM",
              tuesday: "07:00 AM - 07:00 PM"
            }
          }
        ]
      });
    }, 500);
  });
}

class Dashboard extends React.Component {
  state = {
    data: null // or {}
  };

  componentDidMount() {
    simulateXhr().then(data => {
      this.setState({ data });
    });
  }

  render() {
    return (
      <div className="container">
        <h3>Places:</h3>
        {!this.state.data ? (
          "no data yet"
        ) : (
          <ol>
            {this.state.data.places.map(place => (
              <li>{place.name}</li>
            ))}
          </ol>
        )}
      </div>
    );
  }
}

ReactDOM.render(<Dashboard />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>