reactjs - 在前端显示指定列表

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;

标签： reactjs

Answer 1

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

我已经包含aaa了 and 和 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;