时间戳

首页 > 解决方案 > 在下一个 React 页面中使用上下文从商店中提取

javascript - 在下一个 React 页面中使用上下文从商店中提取

问题描述

我不确定我的标题是否适合我正在尝试做的事情？React 新手，我也在使用 Nextjs。

我正在尝试从存储的聊天消息的虚拟数据中获取数据，但出现此错误：

    ×
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
ChatBox
./pages/chat.js:11
   8 | const ChatBox = () => {
   9 |   const [textValue, changeTextValue] = React.useState('');
  10 | 
> 11 |   const [allChats] = React.useContext(CTX)
  12 | 
  13 |   console.log(allChats);
  14 |   return (

不确定问题是什么，以及我可以提取上下文，我可能错过了一些非常简单的东西，或者可能与 nextjs 有关？

在这里，我将分享我的商店，以及我试图用来获取上下文的文件

商店.js：

    mport React from 'react'

export const CTX = React.createContext();

const initState = {
    general: [
        { from: 'user1', msg: 'hello' },
        { from: 'user2', msg: 'u stink' },
        { from: 'user3', msg: 'some other words' }
    ],
    channel2: [
        { from: 'user1', msg: 'hello' }
    ]
}
const reducer = (state, action) => {
    const { from, msg, topic } = action.payload;
    switch (action.type) {
        case 'RECEIVE_MESSAGE':
            return {
                ...state,
                [topic]: [
                    ...state[topic],
                    { from, msg }
                ]
            }
        default:
            return state
    }
}

export const Store = (props) => {

    const reducerHook = React.useReducer(reducer, initState)

    return (
        <CTX.Provider value={reducerHook}>
            {props.children}
        </CTX.Provider>
    )
}

ChatBox.js -

    import React from "react";
import styled from "styled-components";
import Sidebar from "../components/Sidebar";
import UserMessage from "../components/UserMessage";
import { Store, CTX } from '../components/Store'


const ChatBox = () => {
  const [textValue, changeTextValue] = React.useState('');

  const [allChats] = React.useContext(CTX);

  console.log(allChats);
  return (

    <Layout>
      <Store>
        <Sidebar />
        <Wrapper>

          <InnerBoxWrapper>

            <InnerBox>
              <UserMessage />
              <input label="Send a chat" value={textValue} onChange={e => changeTextValue(e.target.value)} type="text" />
            </InnerBox>

          </InnerBoxWrapper>
          <h1>test</h1>
        </Wrapper>
      </Store>
    </Layout>
  )
}

标签： javascriptreactjsreact-hooksnext.js

解决方案

您正在渲染Store内部ChatBox组件。为了使用上下文，您需要将组件呈现ChatBox为组件的子级Store。

因此，在导出时Store从ChatBox组件中删除并用 Store 包装 ChatBox。

import React from "react";
import styled from "styled-components";
import Sidebar from "../components/Sidebar";
import UserMessage from "../components/UserMessage";
import { Store, CTX } from '../components/Store'


const ChatBox = (props) => {
    const [textValue, changeTextValue] = React.useState('');

    const [allChats] = React.useContext(CTX);

    console.log(allChats);
    return (

        <Layout>
            {/*<Store>*/}
                <Sidebar />
                <Wrapper>

                    <InnerBoxWrapper>

                        <InnerBox>
                            <UserMessage />
                            <input label="Send a chat" value={textValue} onChange={e => changeTextValue(e.target.value)} type="text" />
                        </InnerBox>

                    </InnerBoxWrapper>
                    <h1>test</h1>
                </Wrapper>
            {/*</Store>*/}
        </Layout>
    )
};

export default (props) => <Store><ChatBox {...props}/></Store>

推荐阅读