Question

晚上好。用半天时间在状态React中写下查询结果。所有代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

export default class AllCalcs extends Component {
    constructor (props) {
        super(props);

        this.state = {
            calcs: []
        };

        this.listItems = '';

        this.fetchData();
        this.getCalcs();
    }

    fetchData() {
        axios.post('/api/all-calcs')
            .then(response => this.setState({calcs: response.data}))
            .catch(error => console.log(error));
    }

    getCalcs() {
        this.listItems = this.state.calcs.map((calc, index) =>
            <a key={index} href="#" className="list-group-item list-group-item-action flex-column align-items-start">
                <div className="d-flex w-100 justify-content-between">
                    <h5 className="mb-1">{calc.h1}</h5>
                    <small>3 days ago</small>
                </div>
                <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
                    risus varius blandit.</p>
                <small>Donec id elit non mi porta.</small>
            </a>
        );
    }

    render() {
        return (
            <div>
                <div className="list-group">
                    {this.listItems}
                </div>
            </div>
        );
    }
}

if (document.querySelector('#all-calcs')) {
    ReactDOM.render(<AllCalcs />, document.querySelector('#all-calcs'));
}

我确信经验丰富的开发人员将了解问题所在，然后立即告诉您。关键是通过/ api / all-calcs，我们得到了一个包含帖子的数组。它们需要写在this.state.calcs中，以便可以在getCalcs方法中使用。请帮助我找出我在做错什么。

Answer 1

请求是异步的，因此您要在输入数据之前设置列表项。相反，您应该这样做。

export default class AllCalcs extends Component {
  constructor(props) {
    super(props);
    this.state = { calcs: [] };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    axios
      .post('/api/all-calcs')
      .then(response => this.setState({ calcs: response.data }))
      .catch(error => console.log(error));
  }

  getCalcs(calcs || []) {
    return calcs.map((calc, index) => (
      <a
        key={index}
        href="#"
        className="list-group-item list-group-item-action flex-column align-items-start"
      >
        <div className="d-flex w-100 justify-content-between">
          <h5 className="mb-1">{calc.h1}</h5>
          <small>3 days ago</small>
        </div>
        <p className="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam
          eget risus varius blandit.
        </p>
        <small>Donec id elit non mi porta.</small>
      </a>
    ));
  }

  render() {
    const { calcs } = this.state
    return (
      <div>
        <div className="list-group">{this.getCalcs(calcs)}</div>
      </div>
    );
  }
}

基本上，您要做的是启动componentDidMount上的请求。然后构建渲染时要渲染的项目列表。不要将其放在类的变量上，因为它不再与类的生命周期相关联（当您将类的属性存储在这样的类中时，您将不会看到更新/渲染周期）

如何在React状态下写入查询结果？

1 个答案: