Question

我想在我的API上对react-native应用程序发出GET请求后呈现响应。我不确定如何解决这个问题。正如您在我的代码中看到的那样，我尝试了多种内容，例如JSON.stringify，我认为可以正确地解析我的JSON。

var data;

var footballTeasersApp = React.createClass({

    componentDidMount() {
        fetch("http://localhost:8088/teasers/1", {method: "GET"})
        .then((response) => response.json())
        .then((responseData) => {
          console.log(JSON.stringify(responseData.question));
          return ( 
              data = responseData.question
          )
        })
        .done();
    },

    render: function() {
        return (
            <View style={styles.container}>
                <Text>{JSON.stringify(data)}</Text>
                <TouchableHighlight onPress={this._onPressButtonGET} style={styles.button}>
                    <Text>{JSON.stringify(data)} //I want to render the response here</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._onPressButtonPOST} style={styles.button}>
                    <Text>POST</Text>
                </TouchableHighlight>
            </View>
        );
    },

});

返回的JSON如下：

{
  "question": "Which three Spaniards played in the 2007 Champions League Final?",
  "answer": "Pepe Reina, Alvaro Arbeloa, Xabi Alonso",
  "id": 1
}

请注意：我不希望单击按钮来呈现响应，我希望应用程序在加载时执行get请求并呈现响应。

Answer 1

试试这个：

var data;

var footballTeasersApp = React.createClass({

    componentDidMount() {
        fetch("http://localhost:8088/teasers/1", {method: "GET"})
        .then((response) => response.json())
        .then((responseData) => {
          console.log(JSON.parse(responseData.question));
          return ( 
              data = JSON.parse(responseData.question)
          )
        })
        .done();
    },

    render: function() {
        return (
            <View style={styles.container}>
                <Text>{data.question}</Text>
                <TouchableHighlight onPress={this._onPressButtonGET} style={styles.button}>
                    <Text>{data.answer} //I want to render the response here</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._onPressButtonPOST} style={styles.button}>
                    <Text>POST</Text>
                </TouchableHighlight>
            </View>
        );
    },

});

不是100％，但这可能有用。

JSON.stringify（）方法将JavaScript值转换为JSON字符串，如果指定了replacer函数，则可以选择替换值，或者如果指定了replacer数组，则可以选择仅包含指定的属性。

JSON.parse（）方法解析JSON字符串，构造字符串描述的JavaScript值或对象。可以提供可选的reviver函数，以在返回结果对象之前对其执行转换。

解析对象后，可以使用点表示法（如{data.name}

）访问其属性

Answer 2

所以，我终于......让这个工作起来，需要一点点重构但是我们走了：

const URL = 'http://localhost:8088/teasers/1';

export default class footballTeasersApp extends Component {
    constructor() {
      super();
      this.state = {question: '?'}
    }
    componentDidMount() {
      this.fetchData().done()
    }
    async fetchData() {
      const response = await fetch(URL)
      const json = await response.json()
      const question = json.question
      this.setState({question})
    }
    render() {
      return (
        <View style={styles.container}>
          <Text style={styles.text}>
            {this.state.question}
          </Text>
        </View>
      )
    }
  }

从GET请求渲染JSON

2 个答案: