Получить данные результата от внешней функции React

Question

У меня есть внешняя функция, которая получает данные из файла json, и я хочу использовать эту функцию, чтобы мой компонент имел данные вопросов для вопросов. Как мне это сделать?

Вот чтоЯ пытался, и это не будет работать:

КОМПОНЕНТ:

экранов / QuizzQuestion.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button} from 'react-native';
import { getQuestionData } from '../utils/utils'

export default class QuizzQuestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info:null
    };
  }

loadData(){
    getQuestionData(2).then(data=>{
      this.setState({ info: data })
  });
  }

  componentDidMount() {
    this.loadData();
  } 

ВНЕШНЯЯ ФУНКЦИЯ:

/ утилит/utils.js

import * as data from "../assets/questions/questions.json";

export function getQuestionData(n){
   return data.questions[n];
}

Я каждый раз получаю эту ошибку:

Ошибка типа: Ошибка типа: (0, _utils.getQuestionData) (0). Тогда это не функция. (В '(0, _utils.getQuestionData) (0) .then (function (data) {_this2.setState ({info: data});})', '(0, _utils.getQuestionData) (0) .then'не определено) * экраны \ QuizzQuestion.js: 20: 28 в loadData * экраны \ QuizzQuestion.js: 26: 4 в componentDidMount - node_modules \ response-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 15036: 10 вcommitLifeCycles - node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 16636: 8 в commitAllLifeCycles - ... еще 18 стековых фреймов из внутренних компонентов фреймворка

Answer 1

export function getQuestionData(n){
  return data.questions[n];
}

Возвращает вопрос из массива вопросов в вашем объекте данных. Это не не возвращает обещание. Поэтому, когда вы попытаетесь использовать его так, как он возвращает обещание ...

getQuestionData(2).then(data => {
  this.setState({ info: data })
});

... оно сломается и выдаст эту ошибку.

Так что просто возьмите вопрос и установите состояниекак это:

const question = getQuestionData(2);
this.setState({ info: question });

В качестве альтернативы - обратите внимание, что нет причин делать это - сделать функцию async:

const data = { questions: ['Question1', 'Question2', 'Question3'] };

async function getQuestionData(n){
  return data.questions[n];
}

getQuestionData(2).then(q => console.log(q));

Answer 2

getQuestionData является синхронным, а не обещанием. Поэтому вам просто нужно присвоить возвращаемое значение из getQuestionData в требуемое свойство состояния.

loadData(){
  const data = getQuestionData(2);
  this.setState({ info: data });
}