Question

我正在尝试从两个API（类型：GET）渲染数据，但是当我从第一个Api渲染数据时，它给了我想要的东西，但是当我对第二个Api做相同的事情时，它给了我这样的错误 （不变违反：对象作为React子对象无效（找到：具有键{id，name}的对象...）。如果要渲染子集合，请改用数组）

这是我的州代码构造函数（道具）{

      super()
       constructor(props) {
    super(props){this.state={gender:{},races:[]}

现在这是我的API调用

componentDidMount()
{
axios.get("http://172.104.217.178/blaze10/public/api/genders")
    .then((response) => {
       alert(JSON.stringify(response));
          this.setState({
          gender:response.data


        });
          alert(this.state.gender)

       })
           .catch(error => alert(JSON.stringify(error.response.data)));


    //here i call second api races////

       axios.get("http://172.104.217.178/blaze10/public/api/races")
           .then((response) => {
          alert(JSON.stringify(response));
          this.setState({
        races:response.data
    });
    //alert(this.state.gender)
     })
      .catch(error => alert(JSON.stringify(error)));
       }

这是我在渲染函数中编写的代码

 let gender = [];
  let race = [];

  let stateGender = this.state.genderr;
 // alert(typeof stateGender);
 for(let property in stateGender){
  gender.push(<Picker.Item label={stateGender[property]} value={property} />);
 }




 let stateRace = this.state.races;
// alert(typeof stateGender);
for(let property in stateRace){
race.push(<Picker.Item label={stateRace[property]} value={property} />);
}


        and this is my picker components code where i want to show my api 
               data ..
        <Item picker >
    <Left>
   <Text style= 




         {{paddingLeft:10,fontSize:15,fontWeight:'bold'
       }}> Gender</Text>
   </Left>
   <Body>
      <Picker 
        mode="dropdown"
        iosIcon={<Icon name="ios-arrow-down-outline" />}
        style={{ width: '100%' }}

        placeholder="Select Gender"

        placeholderStyle={{ color: "#bfc6ea" }}
        placeholderIconColor="#007aff"
        selectedValue={this.state.gender1}
        onValueChange={(value)=>this.onValueChange(value,'gender')}


      >
        {/* {gender} */}
      </Picker>
      </Body>
    </Item>

这是我要显示第二个api数据的第二个组件

 <Item picker >
        <Left>
       <Text style={{paddingLeft:10,fontSize:15,fontWeight:'bold',color:this.state.backgroundColor3}}> RACE</Text>
       </Left>
       <Body style={{paddingLeft:10}}>
          <Picker 
            mode="dropdown"
            iosIcon={<Icon name="ios-arrow-down-outline" style={{paddingLeft:8}}/>}
            style={{ width: '100%' }}

            placeholder="Select Race"

            placeholderStyle={{ color: "#bfc6ea" }}
            placeholderIconColor="#007aff"
            selectedValue={this.state.race}
            onValueChange={(value)=>this.onValueChange(value,'race')}
          >
            {race}
          </Picker>
          </Body>
          </Item>
          <Item picker >
          <Left>

问题

当我运行我的应用程序时，会同时调用api并在响应中给我数据，第一个api在选择器组件中显示我的数据，但是第二个api给我我上面提到的错误.....请帮助

Answer 1

请确保您要在组件内部呈现的内容（视图，选择器项等）不是对象，而是字符串属性如果您的种族是一个对象，则不能像{race}这样渲染它。相反，您需要这样做：{race.property}，并确保该属性也不是对象。这就是导致您出错的原因。

从本机中的API渲染数据时出错

1 个答案: