как сделать в реакции, когда вы зависите от асинхронных методов

Question

Я новичок, чтобы реагировать, но я немного продвинулся и столкнулся с проблемой, когда я не знаю, как выразить то, что я хочу в моем коде:

У меня есть «прокси» для моих маршрутов, который сохраняет информацию из URL в кеш apollo

function saveUrlVarsToCache(props) {
    const LOCAL_CACHE = gql`
            query localCache {
                kind @client
                name @client
                eid @client
                issueId @client
                view @client
            }
        `

    const {match} = props
    // console.log( "Match path: ", match.path )


    return (
            <Query query={LOCAL_CACHE}>
                { /***async***/ ({data, client}) => {
                    const matchParams = {...(props.match.params), ...{view: Views.findViewByPath(match.path).name}}

                    //only override if the user types the url manually
                    if (data.name)
                        delete matchParams.name
                    console.log("Writing route params to local cache ", matchParams)
                    /***await***/ client.writeData({data: matchParams})
                    return <MainComp {...props}/>
                }}
            </Query>)
}

Я вызываю этот метод на каждом маршруте, который у меня есть

<Route exact path="/:kind"
                                         render={saveUrlVarsToCache}>

Моя проблема в том, что комп отображается до завершения метода apollo client.writeData.

Я не могу поместить оператор return comp в предложение then, поскольку он вернется к методу then, а не к saveUrlVarsToCache.

Что удивительно, так это то, что даже при использовании синтаксиса ожидания асинхронности (здесь прокомментировано) я получаю ошибку:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in Query (at App.js:54)
    in Route (at App.js:88)
    in Switch (at App.js:74)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:73)

Поскольку мне нужны реквизиты, я не могу вызвать этот метод в методе жизненного цикла componentWillMount ...

Что делать?

p.s: Конечно, я могу выполнить рендеринг, вызвав искусственное setState ({}) в предложении then сохранения кэша, но это вызовет дополнительный вызов render (), который мне не нужен

p.p.s: Может быть, для этого есть библиотека, но я не знаю, что они делают за кулисами, поэтому сейчас я буду избегать этого: github.com/capaj/react-promise

Answer 1

class MainComponent extends React.Component {
  async componentDidMount()=>{
  /*call async foo here and set state*/
  }
  render() {
    return (
      <>
        <Route exact path="/:kind" 
          render={<MainComp component_prop={this.state.something} />} 
        />
      </>
    )
  }
}

попробуй вот так