Как установить переменную в значение, предоставленное контекстом (React)

Question

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

Переменная, которую я пытаюсь установить в компоненте 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}>
                    ...

Consumer можно не указывать, если используется contextType, но это ограничивает использование компонента одним контекстом.