асинхронное повторение в реакции - PullRequest
Новая
       10

асинхронное повторение в реакции

0 голосов
/ 30 января 2019

У меня проблема, когда один из моих компонентов должен ждать получения данных во время рендеринга, но я не могу найти способ сделать это.

, поэтому у меня есть метод рендеринга 

render() {
    const getComponentProps = async () => {
                return await this.props.Store.getComponentProperties(id);
            };
    componentProps = getComponentProps(id);

    return <MyComponent
        .
        .
        data={componentProps}/>;
}

проблема в том, что мой компонент выполняет рендеринг до того, как данные извлекаются.я не могу сделать весь рендеринг ожидающим, я также пытался сделать componentProps состоянием в надежде, что он будет перерисован, как только будет готов, но это также не сработало.и, наконец, я попробовал новую функцию Suspense / Lazy в новой версии реакции, которая также не работала.данные, которые я получаю, делают REST-вызов в мою базу данных, и я должен ждать их.Кроме того, рендеринг отображает список компонентов, а не только один, и для каждого компонента он должен получить свои свойства и загрузить их.

какие-либо мысли о том, как сделать эту асинхронную выборку данных в рендере ???

1 Ответ

0 голосов
/ 30 января 2019

Для этого вам нужно будет использовать state.Когда ваш компонент смонтирован, вы можете вызвать функцию setState и дождаться получения ваших данных.После того, как данные извлечены, ваш компонент выполнит повторную визуализацию с правильными данными: 

class MyComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            data: null
        }
    }

    componentDidMount = async() => {
        this.setState({ data: await this.props.Store.getComponentProperties(id) })
    }

    render() {
        return <MyComponent2 data={this.state.data} />;
    }
}

Если вы не хотите, чтобы ваш дочерний компонент получал пустые данные, вы можете не отображать их, пока ваши данныене доставлено: 

render() {
    return this.state.data ? <MyComponent data={this.state.data} /> : <div/>
}
...