Question

我看到了很多问题，但无法获得解决方案这是我的代码：

import React, { Component } from "react";
import axios from "axios";
import "./tree.css";
import "./mainTree";

class TablesTree extends Component {
  constructor(props) {
    super(props);
    this.data = this.props.info;
    this.state = {
      fields: [],
      data: [],
      show: false
    };
  }

  componentDidMount() {
    var dataGet = [];
    this.props.tables.forEach((name, i) => {
      this.getFieldsTable(name.TABLE_NAME, (err, res) => {
        if (res) {
          dataGet.push({
            TABLE_NAME: name.TABLE_NAME,
            columns: res
          });
        }
      });
    });
    this.setState({ data: dataGet });
  }
  getFieldsTable(table, callback) {
    axios
      .get(`table/columns?name=${this.data.user}&psw=${this.data.password}&schema=${this.data.schema}&table=${table}`)
      .then(response => {
        callback(null, response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        {this.state.data
          ? this.state.data.map((itm, i) => {
              return (
                <div>
                  <h1>{itm.TABLE_NAME}</h1>
                </div>
              );
            })
          : null}
      </div>
    );
  }
}

export default TablesTree;

我已经创建了this.state.data的console.log 并且数据在其中，但它不会呈现任何内容我已经尝试了很多方法，但是我仍然没有渲染数据，所以我会感谢您的帮助。

Answer 1

关于您的代码，我会有所更改，但最重要的是，在推送到this.setState（在回调函数内部）之后，您需要执行dataGet。

由于您的API调用是异步的，因此您在组件初始安装时（setState仍然为空）仅调用一次dataGet。

Answer 2

mov bx, OFFSET var ; Load offset address是异步的，因此调用getFieldsTable时dataGet数组为空。

您可以从setState返回承诺并在所有承诺上使用Promise.all，并在所有承诺均已解决后使用数据。

示例

getFieldsTable

React不会渲染来自api响应的数据

2 个答案: