在前端显示指定列表

Question

目标：
在前端显示 listGetAllIndustry 的内容。

问题：

"Error: Objects are not valid as a React child (found: object with keys {listGetAllJobAdvertisement, listGetAllLocation, listGetAllIndustry}). If you meant to render a collection of children, use an array instead."

为了在前端显示 listGetAllLocation 的内容，我遗漏了哪部分代码？

信息：
*我是 React JS 新手

谢谢！

---

{"listGetAllJobAdvertisement":[],"listGetAllLocation":[{"locationId":1,"city":"LOS ANGELES","country":"USA"},{"locationId":2,"city":"LONDON","country":"ENGLAND"},{"locationId":3,"city":"BERLIN","country":"GERMANY"}],"listGetAllIndustry":[{"industryId":1,"name":"ENERGY"},{"industryId":2,"name":"MATERIALS"},{"industryId":3,"name":"INDUSTRIALS"},{"industryId":4,"name":"CONSUMER STAPLES"},{"industryId":5,"name":"HEALTH CARE"},{"industryId":6,"name":"FINANCIALS"},{"industryId":7,"name":"INFORMATION TECHNOLOGY"},{"industryId":8,"name":"COMMUNICATION SERVICES"},{"industryId":9,"name":"UTILITIES"},{"industryId":10,"name":"REAL ESTATE"}]}

---

import { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { VacantPositions } from '../../src/contexts/api';

class Open extends Component {
  state = { aaa: [] };

  componentDidMount() {
      fetch(VacantPositions)
      .then(results => results.json())
      .then(data => this.setState({ aaa: data }  ))
      .catch(err => console.log(err))
  }
  render() {
    return (
      <div>
      { this.state.aaa}
      </div>
    );
  }
}

export default Open;

Answer 1

您会看到此错误，因为您在 render 函数的 return 语句中直接使用状态变量 aaa 而没有告诉 react 如何将 aaa 变量转换为 JSX。

我已包含 aaa 和另外 1 个变量 bbb。根据您的需要，您可以保留 1 个变量，从您的 Open 组件中删除另一个及其相应的用法。

import { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Open extends Component {
  state = {
    // state variable should be object if api response is object
    aaa: {},
    // if you only store 'listGetAllIndustry' then state variable should be array
    bbb: []
  };

  componentDidMount() {
    // I am assuming the api response to be this
    const data = {
      listGetAllJobAdvertisement: [],
      listGetAllLocation: [
        { locationId: 1, city: "LOS ANGELES", country: "USA" },
        { locationId: 2, city: "LONDON", country: "ENGLAND" },
        { locationId: 3, city: "BERLIN", country: "GERMANY" }
      ],
      listGetAllIndustry: [
        { industryId: 1, name: "ENERGY" },
        { industryId: 2, name: "MATERIALS" },
        { industryId: 3, name: "INDUSTRIALS" },
        { industryId: 4, name: "CONSUMER STAPLES" },
        { industryId: 5, name: "HEALTH CARE" },
        { industryId: 6, name: "FINANCIALS" },
        { industryId: 7, name: "INFORMATION TECHNOLOGY" },
        { industryId: 8, name: "COMMUNICATION SERVICES" },
        { industryId: 9, name: "UTILITIES" },
        { industryId: 10, name: "REAL ESTATE" }
      ]
    };
    // fetch(VacantPositions)
    // .then(results => results.json())
    // .then(data => this.setState({ aaa: data }  ))
    // .catch(err => console.log(err))

    this.setState({
      // keeping complete api response in the state
      aaa: data || {},
      // keeping only 'listGetAllIndustry' from api response in the state
      bbb: data.listGetAllIndustry || []
    });
  }
  render() {
    return (
      <div>
        {this.state.aaa.listGetAllIndustry &&
          this.state.aaa.listGetAllIndustry.map((industry) => {
            return (
              <div key={industry.industryId}>
                <span>{industry.industryId}.</span> &nbsp;
                <span>{industry.name}</span>
              </div>
            );
          })}
        ===================================
        {this.state.bbb.map((industry) => {
          return (
            <div key={industry.industryId}>
              <span>{industry.industryId}.</span> &nbsp;
              <span>{industry.name}</span>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Open;

Answer 2

您的 api 正在返回具有多个键和值的对象，您将该对象设置为称为 'aaa' 的状态，因此您不能直接在返回部分呈现对象，您只能在返回方法中呈现特定值.您可以使用 object.entries.map

{Object.keys(this.state.aaa).map(function(key, index) {
 return (
<p>{key}</p>
<p>{index}</p>
)
})};

或者您可以指定特定的值，例如

render() {
return (
  <div>
  { this?.state?.aaa?.listGetAllLocation[0]?.city}
  </div>
);}