Question

我的组件“ countryFactory”从两个localhost JSON REST端点获取数据。通过console.log（countries）和（标签），我可以看到该数据实际上存在于countryFactory组件中。但是，当我在App.js中导入countryFactory并尝试将组件解析为CountryTable时，道具国家和标签为空。

我认为我这样做是错误的。

我需要帮助别人的人来阐明如何轻松访问CountryTable组件中的国家和标签。谢谢！：）

这是我的App.js类。

a=(["id': 'tl_00'}"], ["index': '9',"], ["resp': '1110000000001111',"], ["fors': '1110000000001111'}"])
b=[]
for i in range(len(a)):
   b+=[[]]
   for j in range(len(a[i])):
      b[i]+=[""]
      for k in range(len(a[i][j])):
         if a[i][j][k]!="}":
            b[i][j] += a[i][j][k]
print(b)

这是我的countryFactory.js

import React, {Component} from 'react';
import CountryTable from "./CountryTable";
import countryFactory from "./countryFactory";
import {Table} from "react-bootstrap";
import './App.css';

class App extends Component {

  constructor(props){
    super(props);
  }


async componentDidMount() {
  await countryFactory.fetchCountries();
  await countryFactory.fetchLabels();
}

  render() {
    return (
      <div>
        <div className="App-header">
          <h2>React, State, Fetch and Mobx</h2>
        </div>
        <div className="App-intro">
          <p>Your initial task is to fetch data from the server (see exercise for how to start it),
           and create a table below, with these data</p>          
          <CountryTable props={this.props.countryFactory}/>  
        </div>
      </div>
    );
  }
}

export default App;

这是我的CountryTable.js

//Add imports here

const countriesUrl = " http://localhost:3333/countries";
const labelsUrl = " http://localhost:3333/labels";

class CountryFactory {

  constructor() {
    this.labels = [];
    this.countries = [];
  }

  getLabels = () => {
    return this.labels;
  }

  getCountries = () => {
    return this.countries;
  }

  async fetchCountries() {
    const res = await fetch(countriesUrl);
    const data = await res.json();
    this.countries = data;
    console.log(this.countries);
  }

  async fetchLabels() {
    const res = await fetch(labelsUrl);
    const data = await res.json();
    this.labels = data;
    console.log(data);
  }
}

export default new CountryFactory();

将道具解析为应在表格中呈现道具的组件时为空

0 个答案: