如何在 React 中将来自长获取调用函数的数据作为 props 传递

Question

我有一个处理后端的提取调用函数。此调用需要一些时间（几秒钟）。

还有一个 table class 期望来自后端的数据填充一些行。我正在通过 props.This 函数 returns 传递执行 fetch 调用的函数 table class 需要的值列表以填充某些行。虽然，因为 fetch 调用需要一些时间，所以 table class 侧列表的值似乎总是 'undefined' 并且一些 table 行期望那些在更快的渲染方法完成工作后，值保持为空..

我正在使用 "material-ui" npm 包来构建 table。

这是获取函数：

var reuslts = [];


async callBackEnd() {
    await fetch('*******', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: JSON.stringify({
        request: {
          Purpose: "Ring",
          price: "2000",
          shape: "Round"
        }
      })
    })
      .then(r => r.json())
      .then(r => {
        r.forEach(function (element) {
          reuslts.push('NO: ' + element);
        });
      });
 console.log("I am near the end of app.js and the first value of the list is " + diamondReuslts[0]);

        return reuslts;

      }

这是我将函数作为 props 传递的地方：

  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title} <Table intents={intents} callBackEnd={this.callBackEnd()} />
      </div>
    );
  }

这是 table class 的渲染方法：

const SimpleTable = (props) => {
    const { classes } = props;
    intents1 = props.intents;
    reuslts1 = props.callBackEnd;

    console.log("I am at the beginning of Table.js and first value of the list is " + diamondReuslts1[0]);//Returns undefined


    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <CustomTableCell>Image</CustomTableCell>
                        <CustomTableCell align="right">Price</CustomTableCell>
                        <CustomTableCell align="right">Id reference</CustomTableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map(row => (

                        <TableRow key={row.id}>
                            <CustomTableCell component="th" scope="row">
                                <img src={row.feature} height="42" width="42"></img>
                            </CustomTableCell>
                            <CustomTableCell align="left">{intents1[row.id]}</CustomTableCell>
                            <CustomTableCell align="left">{reuslts1[row.id]}</CustomTableCell>

                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </Paper>
    );

}

在此 class 中，"results1" 变量未定义。当longing从callBackEnd函数返回Results的值时，返回的值和消息只在tableclassreturns"undefined".

的log之后才返回

当从后端返回列表时，我该怎么做才能使 "rendering the table" 的部分等待或重新呈现？

Answer 1

class YourComponent extends React.Component {
    constructor(props) {
        super(props)
        state = {
           result: [],
        };
        this._fetch();
    }

    callBackEnd(/** **/)

    async _fetch() {
        let result = await this.callBackEnd();
        this.setState({result});
    }

    render() {
        const { title } = this.context;
        return (
            <div className="center-screen">
                {title} <Table intents={intents} result={this.state.result} />
            </div>
        );
    }
}

Answer 2

有一个lengthy post about why 作品。归结为：

使用constructor初始化状态。
使用 Async/Await 模式给 fetch 时间完成。
保存结果（一旦可用）以供在您的组件中使用。

如果您只想跳转到实现细节，这两篇文章很有帮助：

如何在 React 中将来自长获取调用函数的数据作为 props 传递

How to pass data from a long fetch call function as props in React

fetch

reactjs

react-props