Question

我试图将道具传递给另一个组件。数据（事件）来自获取调用。我确实得到了道具但不是我期待的方式。当我在willMount中的console.log时，我只能获得第一个对象，当我控制台登录渲染功能时，我确实收到了两个对象。理想情况下，我想在willMount函数中获取这两个对象。任何人都可以解释为什么会发生这种情况，如果他们是一种方法让他们两个控制台登录willMount？ Tha nk you。

//PARENT
whoHasGame = (event) => {
        if(event.error){
            return;
        }else{
            console.log("event in MV", event)//console logs correctly
            this.setState({
                leagueInfo: <LeagueCard event={event}/>
            })
        }
    }

    render(){
        return (
            <ScrollView>
                {this.state.leagueInfo}
            </ScrollView>    
            );
    }

  //CHILD
  export default class LeagueCard extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }


  componentWillMount() { 
    console.log(this.props.event) //only the first object makes it
  };



  render() {
    //console.log(this.props.event)<-- but here both objects make it

    return (
      <View>
        <CardSection>
          <Text>League Name Goes Here</Text>
        {/* <TouchableOpacity onPress={this.display}>
          <Card>
            <CardSection>
              {this.state.matches}
            </CardSection>
          </Card>
        </TouchableOpacity> */}
        </CardSection>
      </View>
    )
  }
}

Answer 1

根据目前的实施情况：

this.setState({
                leagueInfo: <LeagueCard event={event}/>
            })

第一次调用whoHasGame时，会调用setState。它使用第一个对象挂载组件LeagueCard。

由于componentWillMount在生命周期中仅被调用一次，它将打印该对象。它还在render中对其进行控制。

现在，再次调用whoHasGame时，由于setState被调用，它会被第二个对象重新渲染

这一次，componentWillMount没有被调用，但render再次被调用并控制第二个对象。

它将持续到第n个对象。

要在第一次渲染组件时获取所有对象，您需要调用setState一次。

在您的情况下setState基于对象计数被称为nth时间

为什么数组中的两个对象中只有一个作为prop传递？

1 个答案: