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

右侧组件

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})

重新渲染状态更改

1 个答案: