Question

为了了解react-native，我正在尝试构建一个简单的应用程序。

此应用程序最初打印“HELLO WORLD”，然后用它提取的json文件的内容替换此文本（在我的测试中它包含{'Goodbye'：'World'}）。

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
} from 'react-native';

class FetchTextTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "HELLO WORLD",
    };
    fetch('http://echo.jsontest.com/goodbye/world').then(function(response) {
          response.json().then(function(data) {
            this.setState({content: JSON.stringfy(data)});
        });
    });
  }
  render() {
    return (
      <Text>{this.state.content}</Text>
    )
  }
}

AppRegistry.registerComponent('FetchTextTest', () => FetchTextTest);

这样可以显示HELLO WORLD然后获取json，但我无法让它显示新消息。相反，我得到了这个错误：

Possible unhandles Promise Rejection (id: 0): TypeError: undefined is not a function (evaluating 'this.setState

我觉得我做错了。我不应该从构造函数中调用setState吗？我没有得到正确的背景吗？

这样做的预期方式是什么？

Answer 1

you can do it like that

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
} from 'react-native';

export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          content: "",
        };
      }

      componentDidMount(){
         fetch('http://echo.jsontest.com/goodbye/world')
          .then((response) => response.json())
          .then((responseJson) => {
           this.setState({content: responseJson});
          })
          .catch((error) => {
            console.error(error);
          });
      }

      render() {
        return (
          <Text>{this.state.content.goodbye}</Text>
        )
      }
    }

AppRegistry.registerComponent('FetchTextTest', () => FetchTextTest);

expo link

将参数从JSTL传递到servlet

在获取新数据后，如何在react-native中使用setState？

1 个答案: