javascript - 如何将url参数与返回的数据关联起来？

Question

我正在向我的服务器发送一个针对我拥有的每个名称的 http 请求。该名称作为请求参数发送，并返回特定于该名称的数据，但是，返回的数据不会与关联的名称一起返回。我正在尝试使用数据创建一个表格，但无法将名称链接到返回的数据。

class Campaigns extends Component {

    state = {
        campaigns: [
            {
                name: 'intelligent dentistry - oklahoma city'
            },
            {
                name: 'intelligent dentistry - cincinnati'
            },
            {
                name: 'intelligent dentistry - sanford'
            },
            {
                name: 'intelligent dentistry - louisville'
            },
            {
                name: 'intelligent dentistry - austin'
            }
        ],

        campaignData: []
    }

    componentDidMount(){
        let campArray = []
        this.state.campaigns.forEach((campaign, i) => {
            let encodedName = encodeURIComponent(campaign.name.trim())
            axios.get(`/api/campaign/${encodedName}`).then((res) => {
                console.log(res.data.data)
                campArray.push(res.data.data)
                this.setState({
                    campaignData: [...campArray]
                })


            })
        })
    }
    render() {
        console.log(this.state.campaignData)

        let campaignTableData = this.state.campaignData.map((campaign, i) => (
            <>
            <tr>
                <td>Name</td>
                <td>{campaign.totals.visits}</td>
                <td>{campaign.totals.contacts ? campaign.totals.contacts : '0'}</td>
                <td>{campaign.totals.customers ? campaign.totals.customers : '0'}</td>
            </tr>
            </>
        ))

返回数据 -

totals:
bounceRate: 1
bounces: 2
pageviewsPerSession: 1
rawViews: 2
visits: 2

我正在访问的端点 -

app.get('/api/campaign/:campaign', (req, res) => {
    console.log(req.params)
axios.get(`https://api.hubapi.com/analytics/v2/reports/utm-campaigns/total?hapikey=test&d1=${req.params.campaign}`).then((response) => {
        let json = CircularJSON.stringify(response)
        res.status(200).send(json)
    }).catch((err) => {
        console.log(err)
    })
})

Answer 1

您可以在设置状态时自己添加该名称，因为您已经知道该名称。您的代码的另一个问题是您当前在每个请求上覆盖您的 state.campaignData 而不是添加到它上面。您还需要合并 CampaignData 的先前状态。

this.setState(previousState => ({
  campaignData: [ ...previousState.campaignData, { ...campArray, name: campaign.name }]
}));

...

<td>{campaign.name}</td>
<td>{campaign.totals.visits}</td>