Javascript 在子事件处理程序更新父事件的状态后，子事件中的React Native--.Map（）项不会重新加载

在我的项目中，当使用.map函数在数据文件中循环时，我将一个函数updatestate从父组件App传递给子组件Main，它允许子组件调用.setState并附加到父状态的数组中

但是，当我调用此函数来设置父级的状态时，除非我再次点击屏幕，否则映射的部分{contents}将不会重新加载

有什么想法吗？我是否缺少一些绑定或需要执行一些组件安装或其他操作？我已尝试在eventHandler中添加this.forceUpdate，但**映射的{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>
        );
    }
}

---

试着像这样重写你的设置状态

从react native导入{InteractionManager}； updateArr=itemname，url=>{ InteractionManager.runAfterInteractions=>{ this.setState prevState=>{ favoritesList:[…prevState.favoritesList，{item_name:itemname，url:url}] }; }; } //将此行添加到父组件构造函数 this.updateArr=this.updateArr.bindthis 尝试不使用索引作为键。有意义的键值有助于引擎确定需要重新绘制的内容

在您的情况下，我建议首先使用key={item.url}

---

：该建议仍然不成功-父项的状态也像以前一样正确更新，但在onSwipedRight事件之后，映射的部分，{contents}没有渲染。我想知道滑动的动画是否不允许状态正确更新。尝试使用InteractionManager.runAfterInteractions=>{this.setState…}将setState包装到updateArr中。同样，在应用程序父组件中，将此行添加到构造函数this.updateArr=this。updateArr.bindthis；哦，听起来很有可能就是它！我在执行你最后一次评论中的建议时遇到了一些问题，尽管是从这种格式——你能以代码形式将其添加到你的答案中吗？非常感谢！

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