0

我正在学习在我的反应应用程序中实现 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>
            )
    }
}

所需的功能是，当我单击查看注释时！按钮，它显示按钮上方注释的标题和描述，如果我再次单击它，它会隐藏它们。

但是，我得到的是它创建了另一个订阅组件，这似乎删除了“见注！” 按钮部分。这是结果的图像。

结果

问题是我不能再次使用按钮来隐藏注释信息，我显然使用了错误的订阅组件，但我想不出另一种方法来使用未声明的条件，所以对此的任何帮助将不胜感激。

在此先感谢，祝您度过愉快的一周！

4

2 回答 2

0

这是一个反模式：

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
}));
于 2019-02-04T14:59:59.140 回答
0

如果有条件，我已经设法用内联来解决它。但是我对这个解决方案感到不舒服，我想知道如何实现一个完整的 if 条件，所以如果有人知道请发表评论！

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>
        )
    }
于 2019-02-04T15:47:05.550 回答