如何在Reactjsx文件中访问多个Context变量？

问题描述

我的应用程序是一种仪表板，它具有多个“列表”面板，其内容取决于另一个面板中各种值的设置。我从其他人那里继承了这个项目，并且我对React很熟悉，但对React Context并不是特别熟悉。

因此，有一个片断上下文，如下所示（pieces-context.jsx）：

import React,{ Component } from 'react'
import { objectOf,any } from 'prop-types'

const PiecesContext = React.createContext({
  showUser: '',showItem: '',setUser: () => {},setItem: () => {}
})

export class PiecesProvider extends Component {
  
  state = {
    showUser: 'all',showItem: 'all'
    setUser: (user) => {
      this.setState({ showUser: user })
    },setItem: (item) => {
      this.setState({ showItem: item })
    }
  }

  render() {
    const { children } = this.props
    const { showUser,setUser } = this.state
    const { showItem,setItem } = this.state

    return (
      <PiecesContext.Provider value={{showUser,setUser,showItem,setItem}}>
        {children}
      </PiecesContext.Provider>
    )
  }
}

export const PiecesConsumer = PiecesContext.Consumer

“控制”面板允许用户更改“用户”和“项目”的值。有可用用户和项目的列表，用户可以单击一个以查看相应的项目。 “项目”控制器为（用户一台基本相同）：

class PiecesSelector extends Component {

const itemList = [
  {label: 'RN35',value: 'rn35'},// 'RN35' is the item code for this item
  {label: 'SP24',value: 'sp24'},...
]

  render() {
    return (
      <PiecesConsumer>
        {({
          showItem,setItem
        }) => (
          <>
            <div key={uuid()} className="grid">
              <SelectButton value={showItem} options={itemList} onChange={(e) => { setItem(e.value) }} />
            </div>
          </>
        )}
      </PiecesConsumer>
    )
  }
}

export default PiecesSelector

这使用了primereact的SelectButton，它实际上显示了一个按钮列表，每个按钮用于itemList中的每个项目。最初选择showItem的当前值（如果不为null），并且如果用户单击另一个按钮，则将相应的值传递到setItem以更新上下文。

现在，我想显示当前选中的作品的列表（由用户和商品代码选择）。例如。用户可能希望查看站点上当前存在的所有作品，或者他们希望按用户（例如查看鲍勃的作品）或按商品代码（以查看所有RN35类型的作品）进行过滤，或同时按两种方式（以查看有多少个）鲍勃（Bob）有RN35）。

这全部由整个仪表板组件控制：

import React,{ Component } from 'react'
import PiecesSelector from '../piecesSelector'
import PiecesList from '../piecesList'
import { PiecesProvider } from '../pieces-context'

class DashboardComponent extends Component {

  render() {

    return (
      <PiecesProvider>
        <div className="p-grid p-fluid dashboard">
          <PiecesSelector/>
          <PiecesList/>
        </div>
      </PiecesProvider>
    )
  }
}

export default DashboardComponent

PiecesList是需要了解当前选择选项（用户和项目）的众多组件之一。因此，我的问题是，如何访问PiecesList中的PiecesConsumer？我也有一个LoginContext，所以我也必须检索它，因此不能只设置contextType。

到目前为止，我有：

import React,{ Component } from 'react'
import table from '../content/tableData.json'

class PiecesList extends Component {
  constructor() {
    super()
    this.state = {
      data: table,// Full data table (read in from file)
    }
  }

  getCurrentData = () => {

    const { data: { data } } = this.state // Read in all the data
    let returnData = data

    // SOMEHOW THIS NEEDS TO KNOW showUser AND showItem

    if (showUser !== 'all') {
      returnData = returnData.filter(row => row.assignedTo === showUser)
    }

    if (showItem !== 'all') {
      returnData = returnData.filter(row => row.itemcode === showItem)
    } 

    return returnData

  }

  render() {
    return (
      <PiecesConsumer>
        {({ showUser,showItem }) => (
          <LoginConsumer>
            {({ user }) => ( 
              <div className="dataList">
               // Show the data
              </div>
           )}
          </LoginConsumer>
        )}
      </PiecesConsumer>
    )
  }
}

export default PiecesList

我不知道如何在我有权访问showUser和showItem时调用getCurrentData。我可以将其称为渲染的第一步，但是那时我没有这些值。如果我在两个使用者中都调用它，则会在下一行（）处出现错误。它说“意外令牌，预期为'，'”。如果我加逗号，它会显示“意外的'，'”。

我该如何解决？我不想太多改变整体结构，因为其他因素取决于它，所以我真的很想尽可能地将更改保持在PiecesList内。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript jsx jsx reactjs reactjs