如何將變量設置為上下文提供的值 (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但這會限制組件使用單個上下文。