Question

我的项目循环遍历子组件Main中的数据数组，并且我正在尝试更新父组件App中的状态（在卡上向右滑动） Main），以便我可以访问Favorites中兄弟组件上“向右滑动”的数据。希望这有意义吗？

项目结构如下：

App
 |__ Rootstack
       |
       |__Favorites
       |__Main

在我的Main组件中，我正在映射collection数组并循环播放：

collection = imagedata;
// a local JSON array of data that I am looping thru in Main

class Main extends React.Component {
  _toFavs = () => {
    this.props.navigation.navigate('Favorites');
  };

  render() {
      const contents = collection.map((item, index) => {
        return (
            <Card key={index}>
              ......
            </Card>
        )
      });

      return (
      <View>

            <CardStack
             onSwiped={() => {console.log('onSwiped')}
             onSwipedRight={() => console.log('onSwipedLeft')}>
             //
             //HERE IS THE PART - HOW TO UPDATE THE 'favoritesList' array in the parent 'App's state?
             //
              {contents}

            </CardStack>

      </View>
        );
    }
}

const RootStack = StackNavigator(
  {
    Main: {
      screen: Main},
    Favorites: {
      screen: Favorites}
  },
  {
    initialRouteName: 'Main'
  }
);

class Favorites extends React.Component {
 // The plan is to eventually access the favoritesList array in App's state here and display cards that were swiped right in the Main component.
  _onPress = () => {
        this.props.navigation.navigate('Main');
    };
  render() {
    return (
        <View><Text>Hello!</Text></View>
    );
  }
}

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

我遇到了其他一些更新状态的答案，比如 this.setState({ favoritesList: [...this.state.favoritesList, 'new value'] })，但如果我在子组件App中，我怎样才能对Main的.state执行此操作？

提前致谢！

Answer 1

        collection = imagedata;
    // a local JSON array of data that I am looping thru in Main

    class Main extends React.Component {
      _toFavs = () => {
        this.props.navigation.navigate('Favorites');
      };

      render() {
          const contents = collection.map((item, index) => {
            return (
                <Card key={index}>
                  ......
                </Card>
            )
          });

          return (
          <View>

                <CardStack
                 onSwiped={() => {console.log('onSwiped')}
                 onSwipedRight={() => {console.log('onSwipedLeft') ;
                                 this.props.screenProps()}}>
                 //

                  {contents}

                </CardStack>

          </View>
            );
        }
    }

    const RootStack = StackNavigator(
      {
        Main: {
          screen: Main},
        Favorites: {
          screen: Favorites}
      },
      {
        initialRouteName: 'Main'
      }
    );

    class Favorites extends React.Component {
     // The plan is to eventually access the favoritesList array in App's state here and display cards that were swiped right in the Main component.
      _onPress = () => {
            this.props.navigation.navigate('Main');
        };
      render() {
        return (
            <View><Text>Hello!</Text></View>
        );
      }
    }

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

      render() {
          return <RootStack  screenProps={this.updateArr} />;
        }
      }

我希望它能解决你的问题

更新道具名称

React Native - 如何在子组件（StackNavigators）中附加到父状态数组？

1 个答案: