Перерисовать при изменении состояния

Question

Я пытаюсь повторно визуализировать компонент BookmarkButton, щелкнув его значок.В основном здесь сценарий.Item может быть добавлен в закладки или нет.Я использую BookmarkButton для добавления / удаления элемента из закладок. Я хочу обновить визуализацию BookmarkButton, чтобы показать значок звезды (элемент отмечен закладкой) или просто контур (элемент не отмечен закладкой).Действительно очень распространенный сценарий.Проблема в том, что BookmarkButton не выполняет повторную визуализацию при изменении состояния ..

Компонент элемента

class Item extends Component {
    static navigationOptions = ({ navigation,state }) => ({
        headerTitle: "",
        headerTintColor: 'white',
        headerRight: <RightSide navigation={navigation} /> ,
    })
    constructor(props) {
        super(props);
    }

Компонент RightSide

class RightSide extends Component {

    render(){
        const { navigation } = this.props;
        const { params } = navigation.state;

        return  (
            <View style={{flex:1,flexDirection:"row"}}>
                <BookmarkButton id={params.id} />
            </View>
        )

    }
}

Компонент BookmarkButton

 class BookmarkButton extends Component {

        constructor(props)  {
            super(props);
            this.state = {
                bookmarked: false
            }
        }
        async componentDidMount(){
        let c = await this.checkBookMark(this.props.id)
        await this.promisedSetState({bookmarked: c})
    }

        async _toggleBookmark(id) {

            let b = await this.checkBookMark(id) //check if the ID is present in bookmarks @returns boolean
                b ? await this.removeBookMark(id) : await this.addBookMark(id)
            this.setState({bookmarked:b})
        }
        promisedSetState = (newState) => {
        return new Promise((resolve) => {
            this.setState(newState, () => {
                resolve()
            });
        });
    };
        render () {

            let icon = this.state.bookmarked ? "md-star" : "md-star-outline"
            return(
                <TouchableOpacity
                    onPress={() => this._toggleBookmark(this.props.id)}
                    <Ionicons name={icon} color="white" size={30} />
                </TouchableOpacity>
            )}

Answer 1

Мне кажется, я знаю, в чем твоя проблема.

Вы проверяете, был ли элемент отмечен ранее. Я полагаю, что если он не был отмечен, отмеченный this.checkBookMark(id) вернет false. Значение b === false

Если он возвращает false, вы добавите его в список закладок, используя await this.addBookMark(id)

Однако, это важная часть. Затем вы устанавливаете состояние в значение b, которое равно false. Вы должны установить значение состояния !b

Ваш setState должен стать

this.setState({bookmarked: !b})