Условные выражения в Unstated (React)

Question

Я учусь реализовывать Unstated в своем приложении реакции.

Я сделал простое приложение, которое показывает примечание, используя Unstated.

Это мой NoteContainer:

class NoteContainer extends Container {
    state = {
        title: 'My Note',
        desc: 'This note state is managed with unstated',
        isDisplaying: false,
    }

    constructor() {
        super()
        this.show = this.show.bind(this);
    }

    show() {
        this.setState({ isDisplaying: !this.state.isDisplaying })
        console.log(this.state);
    }
}

Как видите, это действительно просто, просто измените свойство isDisplaying в состоянии, чтобы я мог использовать его в компоненте Note.js для отображения заголовка и сообщения заметки, например:

class Note extends Component {
    state = {
        isShowing: false,
    }

    render() {
        if (this.state.isShowing) {
            return (
                <Subscribe to={[NoteContainer]}>
                    {noteContainer => (
                        <div className="container">
                            <p>{noteContainer.state.title}</p>
                            <p>{noteContainer.state.desc}</p>
                        </div>
                    )}
                </Subscribe>
            )
        }
        return (
                <Subscribe to={[NoteContainer]}>
                    {noteContainer => (

                        <div className="container">
                            <button className="btn btn-success" onClick={() => {
                                noteContainer.show();
                                this.setState({
                                    isShowing: noteContainer.state.isDisplaying,
                                })
                                console.log(this.state);
                            }}>
                                See Note!
                            </button>
                        </div>
                    )}
                </Subscribe>
            )
    }
}

Желаемая функциональность заключается в том, что, когда я нажимаю кнопку "См. Примечание"! Кнопка, она показывает заголовок и описание заметки над кнопкой, и если я нажимаю на нее снова, она скрывает их.

Тем не менее, я получаю, что он создает другой компонент подписки, и это, кажется, удаляет "См. Примечание!" часть кнопки. Вот изображение результата.

Проблема в том, что я не могу снова использовать кнопку, чтобы скрыть информацию о заметке, я явно неправильно использую компонент подписки, но я не могу придумать другой способ использования условного использования с использованием unstated, поэтому любая помощь по этому вопросу будет принята с благодарностью.

Заранее спасибо, хорошей недели!

Answer 1

Мне удалось решить это с помощью встроенного, если условно. Однако я не чувствую себя комфортно в этом решении, я хотел бы знать, как реализовать полное, если оно условное, поэтому, если кто-нибудь знает, пожалуйста, оставьте комментарий!

render() {
        return (
            <Subscribe to={[NoteContainer]}>
                {noteContainer => (
                    <div className="container">
                        <p>{noteContainer.state.isDisplaying ? noteContainer.state.title : ''}</p>
                        <p>{noteContainer.state.isDisplaying ? noteContainer.state.desc : ''}</p>
                        <button className="btn btn-success" onClick={() => {
                            noteContainer.show();
                        }}>
                            See Note!
                        </button>
                    </div>
                )}
            </Subscribe>
        )
    }

Answer 2

Это анти паттерн:

this.setState({ isDisplaying: !this.state.isDisplaying })

Сначала проверьте, а затем установите состояние:

let answer = this.state.isDisplaying ? true : false
this.setState({isDisplaying: answer})

Или используйте переменную prevState

this.setState((prevState, props) => ({
  isDisplaying: prevState.isDisplaying ? true : false
}));