Question

我有这个组件功能

 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}）的对象，如果您打算渲染一个孩子的集合，请改用数组。

Answer 1

似乎您正在渲染方法中的JSX中直接调用this.FetchCards。您可以在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>
    );
  }
}

React内部的不变违规错误

1 个答案: