Javascript 如何从对象数组中提取数据，并通过API端点将其传递给.fetch（），使用React获取所需的对象值？

我正在使用React使用PowerBI创建一个报表仪表板，需要将嵌入令牌值传递到我们创建的后端端点，然后将新值传递到PowerBI嵌入组件中，以正确显示报表

如果我手动放入嵌入令牌值，我的应用程序就可以正常工作，但由于多种原因（例如安全性和耗时），这并不理想，因此我尝试在React应用程序中实现自动化

我们手动显示报告的方式是通过一个switch语句，因为有多个报告可供选择，并且每个报告都放置了PowerbiEmbedded组件，并从放置报告ID和嵌入URL的本地JSON文件中提取适当的值。这就是我粘贴令牌用于测试/概念验证的同一个文件，并且有一个单独的组件处理获取请求（下面是RequestToken.js），对于如何将其与ReportDashboard.js连接有点迷失，因为这就是处理每个报告显示的内容

如果您对此有任何建议和帮助，我们将不胜感激

---

RequestToken.js

import React from "react"
import { groupVariables } from '../constants/reportVariables';


// This will handle token retrieval for each 
class RequestAccessToken extends React.Component {

    state = {
        isLading: true,
        tokenDetails: [],
        error: null
    };

    getTokenDetails() {

        // where we're fetching data from b2b for proof of concept
        axios.get(`/api/token/${accessToken}`)

        // got the API response and receive data in JSON format
        .then(response => 
            response.data.results.map(tokenDetail => ({
                token: `${tokenDetail.token}`
            }))
        )

        .then(tokenDetails => {
            this.setState({
                tokenDetails,
                isLoading: false
            });
        })

        // catch any errors we hit and update the output
        .catch(error => this.setState({ error, isLoading: false }));
    }

    componentDidMount() {
        this.getTokenDetails();
    }

    render() {
        const { isLoading, tokenDetails } = this.state;
        return (
            <React.Fragment>
                {!isLoading ? (
                    tokenDetails.map(tokenDetail => {
                        const { token } = tokenDetail
                        return (
                            console.log(tokenDetail)
                        );
                    })
                // If there is a delay in data, let's let the user know it's loading
                ) : (
                <h3>Loading...</h3>
                )}
            </React.Fragment>
        );
    }
}

从“React”导入React
从“../constants/reportVariables”导入{groupVariables}；
//这将处理每个服务器的令牌检索
类RequestAccessToken扩展了React.Component{
状态={
艾尔丁：没错，
令牌详细信息：[]，
错误：null
};
getTokenDetails（）{
//我们从b2b获取数据以进行概念验证
get（`/api/token/${accessToken}`）
//获取API响应并接收JSON格式的数据
。然后（响应=>
response.data.results.map（tokenDetail=>({
令牌：`${tokenDetail.token}`
}))
)
。然后（令牌详细信息=>{
这是我的国家({
详细信息，
孤岛加载：false
});
})
//捕获我们遇到的任何错误并更新输出
.catch（error=>this.setState（{error，isLoading:false}））；
}
componentDidMount（）{
这个。getTokenDetails（）；
}
render（）{
const{isLoading，tokenDetails}=this.state；
返回(
{！正在加载(
tokenDetails.map（tokenDetail=>{
const{token}=tokenDetail
返回(
console.log（令牌详细信息）
);
})
//如果数据有延迟，让我们让用户知道它正在加载
) : (
加载。。。
)}
);
}
}

ReportDashboard.js

import React from 'react';
import { reportVariables } from '../constants/reportVariables.js';
import PowerbiEmbedded from 'react-powerbi'

function Reporting({ activeView }) {
  // configure the reportIds and report name in constants/reportVariables.js
  let reportData;

  switch(activeView){
    case 'Business to Consumer':
      reportData = <div>
        <PowerbiEmbedded
          id={reportVariables.reportIds.b2c}
          embedUrl={reportVariables.reportURL.b2c}
          accessToken={reportVariables.reportToken.b2c}
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          embedType={`report`}
          tokenType={`Embed`}
          permissions={`All`}
        />
      </div>
      break;
    case 'Business to Business': 
      reportData = <div>
      <PowerbiEmbedded
          id={reportVariables.reportIds.b2b}
          embedUrl={reportVariables.reportURL.b2b}
          accessToken={reportVariables.reportToken.b2b}
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          embedType={`report`}
          tokenType={`embed`}
          permissions={`All`}
        />
    </div>
      break;
    case 'Agent':
      reportData = <div>
      <PowerbiEmbedded
          id={reportVariables.reportIds.agent}
          embedUrl={reportVariables.reportURL.agent}
          accessToken={reportVariables.reportToken.agent}
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          embedType={`report`}
          tokenType={`embed`}
          permissions={`All`}
        />
    </div>
      break;
    case 'A/B Testing':
      reportData = <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/lcGoWfXLRpc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      break;
    default: 
      break;
  }

  return(
    <div className='frameDiv'>  
      <style>{`
        .frameDiv{
          justify-content: center;
          display: flex;
          align-items: center;
          width: 85vw;
          height: calc(100vh - 39px);
          background: #ccc;
        }
        .powerbi-frame {
          width: 85vw;
          height: calc(100vh - 39px);
        }
        `}
      </style>

        {reportData}

    </div>
  ); 
}
export default Reporting

从“React”导入React；
从“../constants/reportVariables.js”导入{reportVariables}；
从“react powerbi”导入PowerbiEmbedded
函数报告（{activeView}）{
//在constants/reportVariables.js中配置ReportID和报告名称
让我们报告数据；
开关（activeView）{
“企业对消费者”案例：
报告数据=
打破
“企业对企业”案例：
报告数据=
打破
案件“代理人”：
报告数据=
打破
案例“A/B测试”：
报告数据=
打破
违约：
打破
}
返回(
{`
.frameDiv{
证明内容：中心；
显示器：flex；
对齐项目：居中；
宽度：85vw；
高度：计算（100vh-39px）；
背景：#ccc；
}
.powerbi框架{
宽度：85vw；
高度：计算（100vh-39px）；
}
`}
{reportData}
); 
}
导出默认报告

RequestAccessToken需要在某个地方呈现，对吗？到目前为止，它只是坐在那里。将其导入仪表板组件并呈现，然后您就可以在那里访问您的令牌。

您可以通过多种方式将令牌传递给其他组件，但这一切归结为“作为道具传递”。您可以使用React上下文、集中状态管理或父/子嵌套。另一个我认为最优雅的选择是创建一个高阶组件（HOC），它用

RequestAccessToken

组件包装任何组件：

从'React'导入{useffect，useState}；
带有accessToken（accessToken）的函数{
返回组件=>props=>{
常量[状态，设置状态]=使用状态({
孤岛加载：是的，
令牌详细信息：[]，
错误：null
});
useffect（（）=>{
get（`/api/token/${accessToken}`）
//我们从b2b获取数据以进行概念验证
//获取API响应并接收JSON格式的数据
。然后（响应=>
response.data.results.map（tokenDetail=>({
令牌：`${tokenDetail.token}`
}))
)
。然后（令牌详细信息=>{
设定状态({
详细信息，
孤岛加载：false
});
})
//捕获我们遇到的任何错误并更新输出
.catch（error=>setState（{error，isLoading:false}））；
}, []);
const{isLoading，tokenDetails，error}=state；
返回(
正在卸载和加载。。。
||加载令牌时出错&&错误
|| 
);
};
}

您将使用以下方式：

const B2BReport=withAccessToken（'some-token-name'）（{accessToken}）=>
);

---

这将创建一个新的

B2BReport

组件，该组件获取由HOC注入的

accessToken

prop。然后，您将在您的

报表仪表板
组件中呈现此
组件。
仅需确认，您的问题是否归结为“如何将在
RequestAccessToken
中获取的令牌传递给我的
报表
组件？”是，