javascript - React Native -- 子イベント ハンドラが親の状態を更新した後、子の .Map() 項目が再レンダリングされない

Question

私のプロジェクトでは、.map()関数を使用してデータファイルをループしながら、関数 ( updatestate) を親コンポーネントからApp子に渡していMainます。これにより、子は親状態で呼び出し.setState()て配列に追加できます。

しかし、この関数を呼び出して親の状態を設定すると、マップされたセクション-- {contents}--画面をもう一度タップしない限り再レンダリングされません。

何か案は？バインディングが不足していますか、それとも componentDidMount などを実行する必要がありますか? this.forceUpdate()eventHandler 内に追加しようとしましたが、**マップされた{contents}セクション**はまだ自動的にレンダリングされません。

const RootStack = StackNavigator(
  {
    Main: {
      screen: Main}
  }
);

export default class App extends Component<{}> {
    constructor(props) {
      super(props);
      this.state = {
        favoritesList: []
      };
    }

  updateArr=(itemname, url)=>{this.setState({ favoritesList: [...this.state.favoritesList, {"item_name":itemname, "url":url}]})};

  render() {
      return <RootStack screenProps={{appstate: this.state,
                                    updatestate: this.updateArr}}
      />;
    }
  }

class Main extends React.Component {

  render() {
    var updatestate = this.props.screenProps.updatestate;

    //collection is the data (local JSON) i'm looping thru via .map in Main Component

    const contents = collection.map((item, index) => {
        return (
            <Card key={index}
                  onSwipedRight={() => {updatestate(item.item_name,item.url)}}
            >
              <View> //THIS and anything after <Card> doesn't render for the next card automatically if I do 'onSwipedRight'
                <Image
                    source={{uri: item.url}} />
               </View>
            </Card>
        )
      },this);

      return (
      <View>
            <CardStack>

              {contents} //THIS IS THE PART THAT WON'T AUTO-RERENDER AFTER THE EVENT HANDLER THAT SETS THE PARENT'S STATE

            </CardStack>
      </View>
        );
    }
}

イベントハンドラーの問題ではないことを確認するために、親の状態を設定しない関数を追加し、イベントハンドラーでそれを<Card>呼び出しました-それは完全に機能し、子コンポーネント<Card>は完全にレンダリングされます. updatestateアップストリームを呼び出すように機能するのは、親から子に渡された関数であるようです。何らかの理由で、子がイベントハンドラーの後にマップされ.setState()たものをレンダリングしない/レンダリングを終了しない原因となっています。{contents}

class Main extends React.Component {
  render() {

    var updatestate = this.props.screenProps.updatestate;

    var newfunc = (a, b) => {console.log('a:', a, 'b:', b)};

      const contents = collection.map((item, index) => {
        return (
            <Card key={index}
                  newfunc(item.item_name,item.item_name);}}
                  // onSwipedRight={() => {updatestate(item.item_name,item.url); }}
                  >