Как обновить данные (реквизиты) на экране назначения навигации

Question

Ques: Есть ли способ обновить данные (реквизиты) на экране назначения навигации, если состояние экрана источника навигации обновлено?

скажем, я перемещаюсь из ScreenA до ScreenB и передать его Навигационные реквизиты data

ScreenA ➔ ScreenB

ScreenA {
   navigate('ScreenB', {data: this.state.data})

   someEvent(){
      this.setState({data: newData})
   }
}

Когда отображается ScreenB, какое-то событие произошло ScreenA, и его state.data обновляется. Как ScreenB может получить эти обновленные данные?

---

Я попытаюсь объяснить это далее, с подробным примером кода:

Существует экран класса PostInfo, который сохраняет все комментарии к сообщению и отображает кнопку. Когда эта кнопка нажата, экран переходит к PostDetails экрану класса. Класс PostInfo предоставляет allComments и функцию обратного вызова replyCommentCB в качестве реквизита навигации.

Этот класс PostDetails затем отображает все комментарии и ответ на комментарий textInputBox. Когда пользователь отвечает на комментарий через этот textInputBox, вызывается функция обратного вызова replyCommentCB и он обновляет состояние в классе PostInfo, добавляя этот новый комментарий.

Однако теперь я хочу это Недавно обновленное состояние allComments будет отражено и на экране PostDetails, так что этот добавленный комментарий также может быть обработан.

class PostInfo {
    constructor(props) {
        this.state = {
            allComments = []
        }
    }

    replyCommentCB = (text) => {
        /* Update comment in DataBase first then update state */
        updatedAllComments = this.state.allComments
        updatedAllComments.push(text)
        this.setState ( {
            allComments : updatedAllComments
        })
    }

    onButtonPress = () => {
        this.navigation.navigate('PostDetails', {
          allComments   : this.state.allComments,
          replyCommentCB: this.replyCommentCB,
        }
      );
    }

    render () {
        return (
            <Button title={"Show Comments"} onPress={this.onButtonPress}/>
        )
    }
}


class PostDetails {
    render() {
        let allComments    = this.props.navigation.getParam('allComments',[]);
        let replyCommentCB = this.props.navigation.getParam('replyCommentCB','');
        return (
            <ScrollView>
                /* Render "allComments" here */
                <TextInputBox onSubmit={replyCommentCB} />
            </ScrollView>
        )
    }
}

PS:

1. Я не хочу использовать Redux et c для управления состоянием.
2. Если я поместил класс PostDetails в модальный режим (вместо navigation.navigate), он будет работать нормально. (когда состояние обновляется в классе PostInfo, реквизиты модального PostDetails также обновляются)

Answer 1

Я сделал это сам. Все, что мне нужно было сделать, это вернуть обновленные данные из функции обратного вызова.

class PostInfo {
    constructor(props) {
        this.state = {
            allComments = []
        }
    }

    replyCommentCB = (text) => {
        /* Update comment in DataBase first then update state */
        updatedAllComments = this.state.allComments
        updatedAllComments.push(text)
        this.setState ({ allComments : updatedAllComments })
        return updatedAllComments;  // return the data that you want to get updated in navigated screen
    }

    onButtonPress = () => {
        this.navigation.navigate('PostDetails', {
          allComments   : this.state.allComments,
          replyCommentCB: this.replyCommentCB,
        }
      );
    }

    render () {
        return (
            <Button title={"Show Comments"} onPress={this.onButtonPress}/>
        )
    }
}


class PostDetails {
    constructor(props) {
        super(props)
        this.replyCommentCB = this.props.navigation.getParam('replyCommentCB','');
        this.state = { allComments : this.props.navigation.getParam('allComments',[]) }
    }

    onReplyComment(text) {
        const updatedAllComments = this.replyCommentCB(text)
        this.setState({ allComments   : updatedAllComments })
    }

    render() {
        return (
            <ScrollView>
                /* Render "this.state.allComments" here */
                <TextInputBox onSubmit={onReplyComment} />
            </ScrollView>
        )
    }
}