Question

学习JavaScript和React Native我似乎不理解如何将json响应放入我可以访问的变量中。我查看了this，this，this以及Mozilla文档以及this等等，但似乎还没有抓住这个概念或者得到它上班。

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代替。

将获取加载到变量React Native中

1 个答案: