Question

我有一个fetch调用函数，用于处理BackEnd。通话需要一些时间（几秒钟）。

还有一个表类，期望来自BackEnd的数据填充某些行。我通过props传递了执行fetch调用的函数。此函数返回表类填充某些行所需的值列表。但是，由于fetch调用需要一些时间，因此似乎在表类侧的列表值始终是“未定义”的，并且某些表行期望这些值在执行更快的render方法后仍为空。

我正在使用“ material-ui” npm软件包来构建表。

这是获取功能：

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;

      }

这是我作为道具传递函数的地方：

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

这是表类的render方法：

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>
    );

}

在此类中，“ results1”变量未定义。渴望从callBackEnd函数返回的结果值时，仅在表类的日志返回“ undefined”后很长时间才返回值和消息。

从BackEnd返回列表时，如何使“呈现表”部分等待或重新呈现？

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起作用的原因，有一个@CraftyMonkey's solution。归结为：

使用constructor初始化状态。
使用Async/Await模式为fetch提供完成时间。
保存结果（一旦可用），以声明要在组件中使用。

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

如何从长获取调用函数中传递数据作为React中的props

2 个答案: