Ошибка инвариантного нарушения внутри React

У меня есть эта функция компонента

 async FetchCards() {
    axios.get(settings.default.baseUrl + '/api/cards/get_cards').then((data) => {
      var dd = data.data.data;
      //this.setState({cards : d});
      return(
        dd.map(d => {
          <Card style={{flex: 0}}>
          <CardItem>
            <Left>
              <Thumbnail source={{uri: d.img}} />
              <Body>
                <Text>{d.name}</Text>
                <Text note>{d.position}</Text>
              </Body>
            </Left>
            <Right>
                {d.gender == 'male' && <Icon style={{fontWeight : '900' , fontSize:32 , color : 'darkblue'}} name='ios-male'></Icon>}
                {d.gender == 'female' && <Icon style={{fontWeight : '900' , fontSize:32 , color : 'pink'}} name='ios-female'></Icon>}
            </Right>
          </CardItem>
          <CardItem>
            <Body>
              <Text>
                {d.subtitle}
              </Text>
            </Body>
          </CardItem>
        </Card>  
        })
      );
    }).catch((err) => {
      console.log(err);
    });
  }

когда я называю это здесь

{this.FetchCards()}

он вызывает эту ошибку:

Инвариантное нарушение: объекты недействительны в качестве реагирующего ребенка (найденный объект с ключами {_40, _65, _55, _72}), если вы хотите отобразить коллекцию детей, используйте вместо этого массив.

javascript,reactjs,react-native,

1

Ответов: 1


2 принят

Похоже, вы вызываете this.FetchCardsпрямо в JSX в вашем методе рендеринга. Вы можете получить данные componentDidMountи установить их в своем состоянии компонента.

пример

class App extends React.Component {
  state = { cards: [] };

  componentDidMount() {
    axios.get(settings.default.baseUrl + "/api/cards/get_cards").then(data => {
      const cards = data.data.data;
      this.setState({ cards });
    });
  }

  render() {
    const { cards } = this.state;
    return (
      <View>
        {cards.map(c => (
          <Card style={{ flex: 0 }}>
            <CardItem>
              <Left>
                <Thumbnail source={{ uri: c.img }} />
                <Body>
                  <Text>{c.name}</Text>
                  <Text note>{c.position}</Text>
                </Body>
              </Left>
              <Right>
                {c.gender == "male" && (
                  <Icon
                    style={{
                      fontWeight: "900",
                      fontSize: 32,
                      color: "darkblue"
                    }}
                    name="ios-male"
                  />
                )}
                {c.gender == "female" && (
                  <Icon
                    style={{ fontWeight: "900", fontSize: 32, color: "pink" }}
                    name="ios-female"
                  />
                )}
              </Right>
            </CardItem>
            <CardItem>
              <Body>
                <Text>{c.subtitle}</Text>
              </Body>
            </CardItem>
          </Card>
        ))}
      </View>
    );
  }
}
JavaScript, reactjs, реагируют родной,
Похожие вопросы