Reactjs 第一次渲染时状态为空

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

类配置文件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
};
}
组件willmount（）{
get（BASE_URL+'user/'+1）
.then（response=>this.setState（{data:response.data.Result}））
.catch（错误=>console.log（错误））；
}
render（）{
返回(
{this.state.data.Profile.CityName}
);
}
}

您已将

数据定义为空数组，然后将其分配给对象。与其将其初始化为空数组，不如将其初始化为
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>
     );
  }
}

类配置文件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：空，
};
}
组件willmount（）{
get（BASE_URL+'user/'+1）
.then（response=>this.setState（{data:response.data.Result}））
.catch（错误=>console.log（错误））；
}
render（）{
返回(
{this.state.data！==null？{this.state.data.Profile.CityName}：请稍候}
);
}
}
您已将
数据定义为空数组，然后将其分配给对象。与其将其初始化为空数组，不如将其初始化为
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>
     );
  }
}

类配置文件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：空，
};
}
组件willmount（）{
get（BASE_URL+'user/'+1）
.then（response=>this.setState（{data:response.data.Result}））
.catch（错误=>console.log（错误））；
}
render（）{
返回(
{this.state.data！==null？{this.state.data.Profile.CityName}：请稍候}
);
}
}
在第一次渲染中
this.state.data
是一个空数组，因此您应该在
渲染
方法中放置一个控件，假设您的网络调用返回一个数组：

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

render（）{
const{data=[]}=this.state；
返回(
data.map（（记录、索引）=>
{record.Profile.CityName}
)
);
}
}

否则，如果您的网络请求返回一个对象，则该对象应类似于：

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>
             }

        }

render（）{
//您可能希望在检索数据时显示加载指示器：
const{data=undefined}=this.state；
如果（数据）{
返回(
{this.state.data.Profile.CityName}
);
}否则{
返回正在加载
}
}
在第一次渲染中
this.state.data
是一个空数组，因此您应该在
渲染
方法中放置一个控件，假设您的网络调用返回一个数组：

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

render（）{
const{data=[]}=this.state；
返回(
data.map（（记录、索引）=>
{record.Profile.CityName}
)
);
}
}

否则，如果您的网络请求返回一个对象，则该对象应类似于：

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>
             }

        }

render（）{
//您可能希望在检索数据时显示加载指示器：
const{data=undefined}=this.state；
如果（数据）{
返回(
{this.state.data.Profile.CityName}
);
}否则{
返回正在加载
}
}
我想您有一个输入错误，渲染方法应该使用
this.state.data
而不是
this.props.data
对不起，但它给了我同样的错误@cubbuk代码解决了我的问题。@nrgwsh嘿，如果我有一些文本输入，并且该值基于this.state.data.something的值，那么如何避免该错误，而不会出现错误，例如TextInput值不能为null！`{this.setState（Object.assign（data，{username:username}））}/>`我想您有一个输入错误，渲染方法应该使用
this.state.data
而不是
this.props.data
对不起，但它给了我同样的错误@cubbuk代码解决了我的问题。@nrgwsh嘿，如果我有一些文本输入，并且该值基于this.state.data.something的值，那么如何避免该错误，而不会出现错误，例如TextInput值不能为null！`{this.setState（Object.assign（data，{username:username}））}/>`很好，它正在工作。但是我仍然不明白到底是什么在做const{data=undefined}=this.state。这是ES6的
解构功能。本质上，它与
const data=this.state.data
相同，因此只是将对象字段显式赋值给变量的一个较短版本。很好，它起作用了。但是我仍然不明白到底是什么在做const{data=undefined}=this.state。这是ES6的
解构功能。本质上它与
const data=this.state.data
相同，因此只是将对象字段显式赋值给变量的一个较短版本。