如何将变量设置为上下文提供的值(React)

Question

我试图在我的react应用程序的上下文中将一个变量设置为数组的值。当我在函数中使用它时，我使用的方法工作得很好，但我正在重构以将该函数导出为类组件，现在返回的对象甚至不在我的状态中。有什么想法吗？

我试图在'FilterNotes.js‘组件中设置的变量：

const notes = [<MyContext.Consumer>{context => context.state.notes}</MyContext.Consumer>];

输出应该是什么：

[
  {
    "id": "cbc787a0-ffaf-11e8-8eb2-f2801f1b9fd1",
    "name": "Dogs",
    "modified": "2019-01-03T00:00:00.000Z",
    "folderId": "b0715efe-ffaf-11e8-8eb2-f2801f1b9fd1",
    "content": "Laborum possimus aperiam. Culpa eos in. Excepturi commodi corporis. Distinctio quo ipsum aperiam et itaque ut quod ut. Modi corporis soluta et deleniti ut. Voluptatibus corrupti aut quia rerum.\n \rOdio ea cupiditate dicta. Aut quia consequatur reprehenderit est sint est fuga illum ex. Adipisci voluptatibus in enim expedita distinctio sint harum dolorem dolor.\n \rQuia accusantium dicta voluptatum reiciendis. Voluptatem illum iusto animi voluptatem fugiat adipisci dolore quia. Sunt fuga autem et qui quo. Consequatur perferendis omnis quisquam repellat voluptas vero deserunt."
  },
...
]

我得到的输出是：

$$typeof: Symbol(react.element)
key: null
props: {children: ƒ}
ref: null
type: {$$typeof: Symbol(react.context), _context: {…}, _calculateChangedBits: null, …}
_owner: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: FilterNotes, …}
_store: {validated: false}
_self: FilterNotes {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
_source: {fileName: "/Users/ryancarville/Desktop/FED_Projects/noteful/src/FilterNotes/FilterNotes.js", lineNumber: 8}
__proto__: Object

组件：

export default class FilterNotes extends Component {
    render() {
        const notes = [<MyContext.Consumer>{context => context.state.notes}</MyContext.Consumer>];

        console.log(notes);
        const folderId = this.props.folderId;
        console.log(folderId);
        const notesFiltered = notes.filter(note => note.folderId === { folderId });

        console.log(notesFiltered);
        return notesFiltered.map((n, i) => {
            return (
                <MyContext.Consumer>
                    {context => (
                        <div key={i}>
                            <li key={n.id}>
                                <Link to={`/notes/${n.id}`}>{n.name}</Link>
                                <br />
                                <br />
                                Date Modified: {n.modified}
                            </li>

                            <button
                                type='button'
                                className='deleteNoteBTN'
                                onClick={() => context.state.deleteNote(`${n.id}`)}>
                                Delete Note
                            </button>
                        </div>
                    )}
                </MyContext.Consumer>
            );
        });
    }
}

Answer 1

上下文值在Consumer回调函数作用域之外不可用，这就是在那里使用回调函数的原因。

所有依赖于上下文值的代码都应该放在一个函数中：

export default class FilterNotes extends Component {
    render() {
        return (
            <MyContext.Consumer>{context => {
                const notes = context.state.notes;
                const folderId = this.props.folderId;
                const notesFiltered = notes.filter(note => note.folderId === { folderId });

                return notesFiltered.map((n, i) => (
                    <div key={i}>
                    ...

如果使用contextType，则可以省略Consumer，但这会限制组件只能使用单个上下文。