孙子组件无法识别全局状态 react redux

Question

大家好，感谢阅读，

我是 redux 的新手，我一直在尝试将孙子组件与商店连接起来，但由于某种原因它不起作用。

子组件（称为 canvas）也使用商店并且没有显示任何问题，但是当我试图在我从子组件内部调用的组件中获取相同数据时我得到：“未捕获错误：找不到 react-redux 上下文值；请确保组件包装在 Provider 标签中”

我在网上搜索了解决方案，大家都建议将应用程序组件包装在 index.js 内的提供者标签中，但我一开始就这样做了

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {createStore} from 'redux';
import allReducer from './reducers'
import { Provider } from 'react-redux';
const store = createStore(allReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());




ReactDOM.render(
  // <React.StrictMode>
    <Provider store={store}>
      <App/>
    </Provider>,
  //</React.StrictMode>,
  document.getElementById('root')
);

App.js

import React from 'react';
import "./App.css";
import { Canvas } from "./components/Canvas";


export default function App() {
 
  return (
    
    <div className="main-div">
     
        <Canvas/>
      
    </div>
  );
}

相关数据来自canvas.js（子组件）

import { Stage, Layer, Rect  } from 'react-konva';
.
.
.
.
const theTextObjs = TextObjs.map((text,key) => {
    
    return (
      

      <TextBox
        //some irrelevant props
      /> 
       {/* some irrelevant info and other components . . . */}
   
  )});
.
.
.
.

return(
 <Stage
           
            width={ window.innerWidth * 2}
            height={ window.innerHeight * 2}
            //style={{ border: '1px solid grey' }}
            ref={stageRef}
           
            
           
          
          >
            <Layer>
              <Rect
              x = {0}
              y= {0}
              width={ window.innerWidth * 2}
              height={ window.innerHeight * 2}
              fill={"white"}
              stroke={"white"}
              strokeWidth={5}
             
              />
             
              {theTextObjs}
              

            </Layer>
          </Stage>
//some more components
)

在 TextBox.js 内部（孙组件）

import React from "react";


import { useSelector} from 'react-redux';


export function TextBox({textEditVisible, textX,fill,textY,textValue,fontSize,width,height,fontStyle,align,id,onDragStart,isSelected,onClick,onChangeEnd,onContextMenu,onChangeEdit,onClickedit,onKeyDownEdit,event}) {

  const selectedTextObj = useSelector(state => state.selectedTextObj)
  const TextObjs = useSelector(state => state.TextObjs)
  const dispatch = useDispatch()
 //
 //some irrelevant info
 // ...
  
  return (
      <>
            {/* more irrelevant info */}
    </>
  );
}

Answer 1

当使用不同的 React 渲染器（例如 Konva）时，您需要将组件包装在新提供程序中的不同渲染器中。对于 Konva，Stage 的 children。

见this issue。

const store = useStore()

return ( <Stage
           
            width={ window.innerWidth * 2}
            height={ window.innerHeight * 2}
            //style={{ border: '1px solid grey' }}
            ref={stageRef}
           
            
           
          
          >
           <Provider store={store}>
            <Layer>
              <Rect
              x = {0}
              y= {0}
              width={ window.innerWidth * 2}
              height={ window.innerHeight * 2}
              fill={"white"}
              stroke={"white"}
              strokeWidth={5}
             
              />
             
              {theTextObjs}
              

            </Layer>
           </Provider>
          </Stage>

孙子组件无法识别全局状态 react redux

grandchild component doesn't recognize the global state react redux

reactjs

redux