Question

以下代码给出了这个错误：“无法读取未定义的属性'CityName'”。但是当我调试代码时，数据状态仅在第一次渲染时为空，之后数据已从API接收到数据。有没有办法强制渲染忽略第一个空状态？

  class profile extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data :[],
        };
       }
    
    componentWillMount() {
        axios.get(BASE_URL + 'user/' + 1)
            .then(response => this.setState({data: response.data.Result}))
            .catch(error => console.log(error));
    }
    
    render() {
         return (
             <View>
                <Text>{this.state.data.Profile.CityName}</Text>
             </View>
         );
      }
    }

Answer 1

您已将data定义为空数组，然后将其分配给对象。而不是将其初始化为空数组，而是将其初始化为null。

class profile extends Component {

constructor(props) {
    super(props);
    this.state = {
        data :null,
    };
   }

componentWillMount() {
    axios.get(BASE_URL + 'user/' + 1)
        .then(response => this.setState({data: response.data.Result}))
        .catch(error => console.log(error));
}

render() {
     return (
         <View>
            {this.state.data !== null ? <Text>{this.state.data.Profile.CityName}</Text> : <Text>Please Wait</Text>}
         </View>
     );
  }
}

Answer 2

在第一个渲染中this.state.data是一个空数组，因此您应该将控件放在render方法上，假设您的网络调用正在返回一个数组：

render() {
      const {data = []} = this.state;
         return (
             data.map((record, index) => <View key={index}>
                                   <Text>{record.Profile.CityName}</Text>
                                 </View>)
         );
      }
    }

否则，如果您的网络请求返回一个对象，那么它应该是：

render() {
          //You may like to show loading indicator while retrieving data:
          const {data = undefined} = this.state;
             if(data) {
                 return (
                       <View>
                         <Text>{this.state.data.Profile.CityName}</Text>
                       </View>
                 );
             }else{
                 return <View><Text>Is loading</Text></View>
             }

        }

在第一次渲染中，state为空

2 个答案: