reactjs - React native - 对象存在于状态中但在我尝试访问它时未定义

Question

我正在尝试查询 API 以使用 React native 应用程序中的数据，但在访问我存储在状态中的数据时遇到了问题。基本上，我试图访问存储在状态中的市场对象。如果我检查状态，我会看到市场对象已正确设置。但是，一旦我尝试对市场对象执行任何操作，我就会遇到一个错误，提示 Cannot read property 'markets' of null。

为什么会发生这种情况，我该如何解决这个问题？

我在下面包含了导致问题的代码。我感谢任何建议。

export default class cryptoTracker extends Component {


  constructor(props) {
    super(props);

  this.opts = {
      baseUrl: 'https://bittrex.com/api/v1.1',
      apikey: 'APIKEY',
      apisecret: 'APISECRET',
    };
    this.updateMarkets();
  }


  updateMarkets(){
   axios.get(this.opts.baseUrl + '/public/getmarkets').then((response) => { 
        this.setState({'markets' : response.data.result});
        }
      ).catch((error) => {
        console.log(error.name)
        console.log("Error");
      });

  }

 render() {
  console.log("The state is below");
  console.log(this.state);
//This line causes the issue
  console.log(this.state.markets);


     return(
     <View>
     </View>);
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

Answer 1

原因是，您没有在constructor 中定义state 变量。 Api 调用是异步，因此当您获取数据并执行setState 时，之后只有state 可用(在state 之前) code> 将为 null)，render 将在此之前执行，当它尝试访问值 this.state.makers 时，它会抛出错误:

Cannot read property 'markets' of null

变化:

1.定义state对象并在其中定义makers，如下所示:

constructor(props) {
     super(props);
     this.state = {
         makers: {}
     }
     this.opts = {
       baseUrl: 'https://bittrex.com/api/v1.1',
       apikey: 'APIKEY',
       apisecret: 'APISECRET',
     };
}

2.使用componentDidMount生命周期方法并在其中执行 api 调用，如下所示:

componentDidMount(){
   this.updateMarkets();
}

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

3. 组件名称必须以大写字母开头，因此请使用 CryptoTracker 而不是 cryptoTracker。