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 เป็นอุปกรณ์ประกอบฉากได้จาก App ›› 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
ขอบคุณสำหรับการตอบกลับ Man -- สิ่งนี้ใช้ได้กับคุณหรือเปล่า? เพื่อทดสอบฟังก์ชันการส่งผ่านเป็นอุปกรณ์ประกอบฉากที่ฉันลองด้วย updateArr=()=>{console.log('updateArr')}; แล้วส่งผ่านเป็นอุปกรณ์ประกอบฉากไปยัง RootStack return <RootStack updateArray={this.updateArr} />; จากนั้นเรียกใช้ฟังก์ชัน prop นั้นภายในแอปเช่นนี้ 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()}} ฉันจะได้รับข้อความ consolelog '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