React Native - Bagaimana cara menambahkan array status induk saat berada di komponen anak (StackNavigators)?

Proyek saya mengulang array data di komponen anak Main, dan saya mencoba memperbarui status di komponen induk, App, pada suatu acara (menggesek ke kanan pada kartu di Main), sehingga saya dapat mengakses data itu telah 'digeser ke kanan' pada Komponen saudaranya di Favorites. Semoga itu masuk akal?

Struktur proyeknya adalah sebagai berikut:

App
 |__ Rootstack
       |
       |__Favorites
       |__Main

Dalam komponen Main saya, saya memetakan array collection dan mengulangi:

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

Saya telah menemukan beberapa jawaban lain untuk memperbarui status seperti this.setState({ favoritesList: [...this.state.favoritesList, 'new value'] }), tetapi bagaimana saya bisa melakukan ini pada .status App saat saya berada di dalam komponen anak Main?

Terima kasih sebelumnya!


react-native reactjs javascript react-navigation parent-child
person SpicyClubSauce    schedule 24.02.2018    source sumber
comment
Ini adalah kasus penggunaan yang ideal untuk Redux dan fungsi koneksinya.   -  person marizikmund    schedule 25.02.2018
comment
Anda dapat menggunakan fungsi redux atau pass sebagai props dari App ›› Rootstack ›› Main   -  person Man    schedule 25.02.2018
comment
@Man Bisakah Anda menguraikan cara menurunkan suatu fungsi sebagai props dari induknya?   -  person SpicyClubSauce    schedule 25.02.2018

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

saya harap ini menyelesaikan masalah Anda

perbarui nama alat peraga

person Man    schedule 25.02.2018
comment
terima kasih atas jawabannya Sobat -- apakah ini berhasil untuk Anda? untuk sekadar menguji fungsi passing sebagai props, saya mencoba dengan updateArr=()=>{console.log('updateArr')}; dan kemudian meneruskannya sebagai prop ke RootStack return <RootStack updateArray={this.updateArr} />; dan kemudian memanggil fungsi prop itu di dalam App seperti itu onSwiped={() => {console.log('onSwiped'), this.props.updateArray}} tetapi saya tidak mendapatkan pesan log konsol 'updateArr' ('onSwiped' berhasil mencatat). Apakah ada sesuatu yang saya lupakan? Apakah 'mengikat' adalah sesuatu yang harus saya lakukan? - person SpicyClubSauce; 25.02.2018
comment
atau jika saya melakukan return <RootStack updateArray={this.updateArr()} />; dan onSwiped={() => {console.log('onSwiped'), this.props.updateArray()}}, saya mendapatkan pesan consolelog 'updateArr' tetapi kemudian muncul kesalahan _this4.props.updateArray is not a function. - person SpicyClubSauce; 25.02.2018
comment
ini bukan this4.props.updateArray() , ketikkan ejaan yang benar this.props.updateAaray() , jika tidak sebelum panggilan periksa semua props di komponenwillmount() - person Man; 25.02.2018
comment
maaf kawan - terima kasih atas bantuan Anda, tetapi saya tidak mengerti komentar terbaru Anda. _this4.props.updateArray is not a function adalah kesalahan yang saya dapatkan. - person SpicyClubSauce; 25.02.2018