React 中的 Invariant Violation 错误答案

【问题标题】：Invariant Violation error inside ReactReact 中的 Invariant Violation 错误
【发布时间】：2018-12-08 19:57:36
【问题描述】：

我有这个组件功能

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

它会触发此错误：

Invariant Violation : 对象作为反应子项无效（发现带有键{_40,_65,_55,_72}) 的对象，如果您打算渲染一个子元素的集合，请改用数组。

【问题讨论】：

看起来您在渲染方法中直接在 JSX 中调用 this.FetchCards。你确定要这样做吗？你不想在回调中或者componentDidMount 中这样做吗？
是的，这是真的 - 我直接在渲染方法中调用它 - 任何简单/快速的解决方案来读取数据然后将其发送到渲染函数

标签： javascript reactjs react-native

【解决方案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>
    );
  }
}

【讨论】：

@27mdmo7sn 太好了，您没有收到任何错误。也许您从 axios 请求中获得的 data 看起来不像您想的那样？
不-我确定它是数组并且有一个元素，我记录了它
我只是直接使用了 this.state.cards.map - 并忽略了你的第一行 => const { dd } = this.state;
@27mdmo7sn 啊，在我的示例中，我使用的是dd。这样就可以解释了，太好了。
也忽略了
标签——因为我使用的是 React-native 而不是 ReactJS