Invariant Violation error inside React

Question

I have this component function

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

when I call it here

{this.FetchCards()}

it fires this error :

Invariant Violation : Objects are not valid as a react child (found object with keys{_40,_65,_55,_72}) , if you meant to render a collection of children , use an array instead.

Answer 1

It looks like you are calling this.FetchCards straight in the JSX in your render method. You could fetch the data in componentDidMount and set it in your component state instead.

Example

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

Invariant Violation error inside React

Question

1 answers

solution1
2 ACCPTED 2018-06-29 15:27:34

Invariant Violation error inside React

Question

1 answers

solution1 2 ACCPTED 2018-06-29 15:27:34

solution1
2 ACCPTED 2018-06-29 15:27:34