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

Question

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

Я сделал простое приложение, которое показывает Note с использованием 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
}));