第一次渲染时状态为空

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

在第一个渲染中，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>
             }

        }

Answer 2

您已将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>
     );
  }
}