父组件可访问Redux store但子组件无法访问是什么原因？

问题根因 #

你使用的@react-pdf/renderer库的<PDFViewer>组件内部是独立的React渲染实例，不会继承外层的React上下文，外层Redux <Provider>的上下文无法传递到其内部包裹的组件，这是报错的核心原因。如果你之前单独包裹<Provider>未生效，大概率是将<Provider>写在了<PDFViewer>外层，或者使用了和全局不同的store实例。

解决方案 #

方案1：通过props传递Redux数据（优先推荐，无兼容风险） #

直接在父组件PreviewCard中提前通过useSelector取出需要的store数据，再以props形式传给<MyDoc>，不需要在子组件内调用useSelector：

const PreviewCard = () => {
  // 外层先获取需要的store数据
  const formStore = useSelector(state => state.pdfFormReducer)
  return (
    <div>
      <PDFViewer style= {{width: '100%', height: '90vh'}}>
        {/* 作为props传递给子组件 */}
        <MyDoc formStore={formStore} />
      </PDFViewer>
    </div>
  )
}

子组件直接使用传入的props即可：

const MyDoc = ({formStore}) => {
  // 直接使用props中的formStore，无需调用useSelector
  return (
   <Document>
     <Page size="A4" style={styles.page}>
         {/* 原有渲染逻辑保持不变 */}
     </Page>
   </Document>
  )
}

方案2：在PDFViewer内部单独包裹Provider（适合需要调用大量store数据的场景） #

在<PDFViewer>的直接子级位置包裹Redux <Provider>，传入项目全局使用的同一个store实例即可：

// 导入项目全局的store实例
import store from '你的store文件实际路径'

const PreviewCard = () => {
  return (
    <div>
      <PDFViewer style= {{width: '100%', height: '90vh'}}>
        {/* 内部单独添加Provider，传入全局统一的store */}
        <Provider store={store}>
          <MyDoc />
        </Provider>
      </PDFViewer>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者46kvolamak