Как передать данные из функции длинного вызова в качестве реквизита в React - PullRequest
Новая
       16

Как передать данные из функции длинного вызова в качестве реквизита в React

0 голосов
/ 26 марта 2019

У меня есть функция вызова выборки, которая обрабатывает с помощью BackEnd. Этот вызов занимает некоторое время (пару секунд).

Существует также класс таблицы, который ожидает, что данные из BackEnd заполнят некоторые строки. Я передаю функцию, которая вызывает вызов через props. Эта функция возвращает список значений, которые нужны классу таблицы для заполнения некоторых строк. Однако, поскольку вызов fetch занимает некоторое время, кажется, что значение списка на стороне класса таблицы всегда «неопределено», и некоторые строки таблицы, которые ожидают эти значения, остаются пустыми после того, как гораздо более быстрый метод рендеринга выполняет свою работу.

Я использую пакет npm "material-ui" для построения таблицы.

Это функция выборки: 

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

Это метод визуализации класса таблицы: 

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" не определена. При стремлении вернуть возвращаемое значение Results из функции callBackEnd значение и сообщение возвращаются только спустя долгое время после того, как журнал класса таблицы возвращает «undefined».

Что я могу сделать, чтобы заставить часть «рендеринга таблицы» ждать или перерисовываться, когда список возвращается из BackEnd?

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Есть длинный пост о том, почему @ решение CraftyMonkey работает.Это сводится к:

  • Использование конструктора для инициализации состояния.
  • Использование шаблона Async / Await для выдачи fetchвремя до конца.
  • Сохранение результатов, когда они будут доступны, для утверждения для использования в вашем компоненте.

Эти две статьи полезны, если вы просто хотите перейти к деталям реализации:

1 голос
/ 26 марта 2019 
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>
        );
    }
}
...