React Native - как добавить в родительский массив состояний в дочернем компоненте (StackNavigators)?

Мой проект перебирает массив данных в дочернем компоненте 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'] }), но как я могу сделать это с .state App, когда я нахожусь внутри дочернего компонента Main?

Заранее спасибо!


react-native reactjs javascript react-navigation parent-child
person SpicyClubSauce    schedule 24.02.2018    source источник
comment
Это идеальный вариант использования Redux и его функции подключения.   -  person marizikmund    schedule 25.02.2018
comment
вы можете использовать функцию redux или pass в качестве реквизита из приложения. ›› Rootstack ›› Main   -  person Man    schedule 25.02.2018
comment
@Man Не могли бы вы подробнее рассказать, как передать функцию в качестве реквизита от родителя?   -  person SpicyClubSauce    schedule 25.02.2018

Ответы (1)


arrow_upward
0
arrow_downward 

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

я надеюсь, что это решит твою проблему

обновить имя-реквизита

person Man    schedule 25.02.2018
comment
спасибо за ответ, чувак, а у тебя это работает? чтобы просто протестировать функцию передачи в качестве реквизита, я пробовал использовать updateArr=()=>{console.log('updateArr')};, а затем передать ее в качестве опоры в RootStack return <RootStack updateArray={this.updateArr} />;, а затем вызвать эту функцию опоры в приложении как таковую onSwiped={() => {console.log('onSwiped'), this.props.updateArray}}, но я не получаю сообщения журнала консоли 'updateArr' ('onSwiped' журналы успешно). Я что-то забыл? Я должен что-то «связывать»? - person SpicyClubSauce; 25.02.2018
comment
или если я делаю return <RootStack updateArray={this.updateArr()} />; и onSwiped={() => {console.log('onSwiped'), this.props.updateArray()}}, я получаю сообщение журнала консоли updateArr, но затем появляется сообщение об ошибке _this4.props.updateArray is not a function. - person SpicyClubSauce; 25.02.2018
comment
это не this4.props.updateArray (), введите правильное написание this.props.updateAaray (), иначе перед вызовом проверьте все свойства в componentwillmount () - person Man; 25.02.2018
comment
извини, чувак, спасибо за помощь, но я не понимаю твой последний комментарий. _this4.props.updateArray is not a function - это ошибка, которую я получаю. - person SpicyClubSauce; 25.02.2018