Запрос доступа внутри метода возврата - PullRequest
Новая
       9

Запрос доступа внутри метода возврата

0 голосов
/ 29 октября 2018

В качестве внешнего интерфейса у меня есть бэкэнд-сайт Drupal и реагирующее приложение. Я делаю запрос GraphQL из приложения и смог отобразить содержимое / с в console.log. Однако моя цель состоит в том, чтобы использовать вызов этого запроса внутри метода return return и отобразить его в приложении, но не повезло. Обратите внимание, у меня есть еще один вызов API REST testName, и он уже отображается в приложении. Моя главная задача - как отобразить запрос graphQL в приложении.

Ниже приведена моя фактическая реализация, но удалены некоторые строки. 

...
import gql from 'graphql-tag';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://192.168.254.105:8080/graphql'
});

client.query({
  query: gql`
    query {
      paragraphQuery {
        count
        entities {
          entityId
          ...on ParagraphTradingPlatform {
            fieldName
            fieldAddress
          }
        }
      }
    }
  `,
})
.then(data => {
  console.log('dataQuery', data.data.paragraphQuery.entities) // Successfully display query contents in web console log
})
.catch(error => console.error(error));

const testRow = ({
  testName = '', dataQuery // dataQuery im trying to display in the app
}) => (
  <View>
    <View>
      <Text>{testName}</Text> //  This is another REST api call.
    </View>
    <View>
      <Text>{dataQuery}</Text>
    </View>
  </View>
)

testRow.propTypes = {
  testName: PropTypes.string
}

class _TestSubscription extends Component {
  ...
  render () {
    return (
      <View>
        <FlatList
          data={this.props.testList}
          ...
          renderItem={
            ({ item }) => (
              <testRow
                testName={item.field_testNameX[0].value}
                dataQuery={this.props.data.data.paragraphQuery.entities.map((dataQuery) => <key={dataQuery.entityId}>{dataQuery})} // Here I want to call the query contents but not sure how to do it
              />
            )}
        />
      </View>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return ({
    testList: state.test && state.test.items,
    PreferredTest: state.test && state.test.PreferredTest
  })
}
...

1 Ответ

0 голосов
/ 29 октября 2018

Есть несколько разных вещей, которые не правы там.

  1. Syntax error из-за того, что ваш тег <key> здесь не закрыт должным образом: 

    (dataQuery) => <key={dataQuery.entityId}>{dataQuery})

  2. И ... для React Native нет элемента <key>. В разделе docs Components вы можете проверить, какие компоненты поддерживаются. Кстати, для React такого элемента тоже нет.

  3. Запрос данных асинхронный. Поэтому, когда вы отправляете запрос в render(), этот метод завершает выполнение намного раньше, чем возвращаются данные. Вы просто не можете так поступить. Что вы можете сделать вместо этого? Вы должны запросить данные (в этом элементе или его родительском или редукторном редукторе - это не имеет значения), и после получения результатов вам нужно установить состояние с помощью .setState (если это происходит внутри компонента) или .dispatch (если вы используете Redux). Это вызовет render(), и компонент будет обновлен с полученными данными. Существует дополнительный вопрос об отображении счетчика или использовании другого подхода, чтобы пользователь знал, что данные все еще загружаются. Но это ортогональный вопрос. Просто чтобы вы знали.

  4. Даже если запрашиваемые данные были как-то синхронизированы (например, при чтении данных из LocalStorage), вы никогда не должны делать это в render(). Этот метод вызывается гораздо чаще, чем вы можете ожидать, поэтому выполнение чего-либо тяжелого здесь приведет к к значительному снижению производительности.

Таким образом, имея в виду № 3 и № 4, вы должны запустить загрузку / выборку данных в componentDidMount(), componentDidUpdate() или как часть обработки, скажем, нажатия кнопки.

...