将 fetch 加载到变量 React Native 中

Question

学习JavaScript和React Native，我似乎不明白如何将json响应放入我可以访问的变量中。我已经看过这个，这个，这个以及Mozilla文档以及这个以及更多内容，但似乎仍然没有掌握这个概念或让它工作。

export default class AwesomeApp extends Component {
constructor(props) {
  super(props);
  this.state = { questions: [] };
}
componentWillMount() {
    this.getQuestionsFromAPI().then((res) => {
      this.setState({
        questions: res
      });
    });
    let url = 'http://127.0.0.1:3000/trivia';
    async function getQuestionsFromAPI() {
      fetch(url).then(response => response.json())
      .then(function(json) {
        questions = json;
        //console.log(questions[0]);
        return questions;})
      .catch(error => console.log(error));
    }
  }
render() {
return (
  <View style={styles.container}>
    <Text style={styles.question}>
      { this.props.questions[0] }
    </Text>
    <View style={{ flex: 1, padding: 20 }}>
        <CheckBox
        label={ this.props.questions }
        checked={false}
        onChange={(checked) => console.log('I am checked', checked)}
        />
    </View>
AppRegistry.registerComponent('AwesomeApp', () => AwesomeApp);

我收到错误"undefined不是一个函数（评估'this.getQuestionsFromAPI（）'）。在浏览器中查看它，设置： var quests = getQuestionsFromAPI（）返回承诺

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

而

console.log(questions[0]); 

返回一个我想要的对象。我不明白什么？

Answer 1

上面发送的代码示例中存在一些问题。

首先，如果你正确地缩进你的代码，你会注意到函数getQuestionsFromAPI是在componentWillMount中声明的。这意味着当您使用 this 引用它时，找不到它。

其次，getQuestionsFromAPI不回报承诺。你应该return fetch(...).

最后，您尝试使用 this.props.questions 获取问题，但您正在分配状态中的问题，因此您应该改用this.state.questions。