Question

我想从服务器＆amp;获取数据在表格中显示它。当我直接将代码放在渲染中时，它就可以工作了。但是，当我封装在 addElementsToDisplay 功能＆amp;在render方法中调用该函数它不起作用。实际上，函数被调用，但响应不以表格格式呈现。以下是我的代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Button } from 'semantic-ui-react';
import ResponseRenderer from './responseRenderer';
import "./App.css";

const responseDataContext = React.createContext({});



class App extends Component {
    constructor(props) {
    super(props);
    this.getPastJobs = this.getPastJobs.bind(this);
    this.addElementsToDisplay = this.addElementsToDisplay.bind(this);
    this.state = { pastJobs: [] }
  }

  render() {
    return (
      <div className="App">
        <Button onClick={this.getPastJobs}>Get Past Jobs</Button>
        <h1> Hello, World! </h1>
        {this.addElementsToDisplay()}
      </div>
    );
  }

  addElementsToDisplay() {
    console.log("state: ", JSON.stringify(this.state));
    this.state.pastJobs.map((value, index) => {
      return <ResponseRenderer key={Math.random()} data={value} />
    });
  }


  getPastJobs() {
    fetch('http://localhost:9090/getPastJobs', {
     method: 'POST',
      body: JSON.stringify({})
    })
      .then((response) => {
        if (response.status !== 200) {
          return;
        }
        response.json().then((jobs) => {
          console.log(jobs);
          this.setState({ pastJobs: jobs.data })
        });
      })
      .catch((err) => {
        console.log(err.message, err.stack);
      });
  }
}

export default App;

Answer 1

你没有返回响应，因此没有呈现，只是return映射的响应，它将正常工作

addElementsToDisplay() {
    console.log("state: ", JSON.stringify(this.state));
    return this.state.pastJobs.map((value, index) => {
      return <ResponseRenderer key={Math.random()} data={value} />
    });
  }

如何正确调用reactjs渲染方法中的函数？

1 个答案: