javascript - 我可以使用状态值来引用本地存储在项目中的查找表中的值吗？

Question

我有一个包含项目哈希的 API 响应。我希望能够与项目中本地存储的查找表交叉引用该项目哈希，因此我能够显示与哈希匹配的项目的名称和图标路径。

我已经尝试将项目哈希存储在状态中，并尝试在我的渲染函数中像这样引用它const weaponURL = hashdata[{weapon}.displayProperties.icon];。我收到一个错误，说Cannot read property 'icon' of undefined.

我也尝试在渲染中使用此代码引用图标路径，{baseURL + {weapon && hashdata[weapon].displayProperties.icon}}但我的 IDE 出现错误提示: is expected

这是我的整个 JS 文件：

import React, {Component} from 'react';
import hashdata from '../data/data';
import ReactTooltip from 'react-tooltip';
import apiKey from '../data/apiKey';


class XUR extends Component {
    state = {
        isLoading: false,
        error: null,
        xurInventory: null,
        weapon: null,
        gear1: null,
        gear2: null,
        gear3: null
    };

    async componentDidMount() {
        this.setState({
            isLoading: true
        });

        try {
            const xurFetch = await fetch('https://www.bungie.net/Platform/Destiny2/Vendors/?components=402', {
                headers: {
                    'X-API-KEY': apiKey
                }
            });
            if (!xurFetch.ok) {
                throw Error(xurFetch.statusText);
            }
            const xurInvJson = await xurFetch.json();
            this.setState({
                xurInventory: xurInvJson,
                weapon: xurInvJson.Response.sales.items.data[2190858386].saleItems[54].itemHash,
                isLoading: false
            });
        } catch (error) {
            this.setState({error: true});
        }

    }

    render() {
        const {isLoading, error, weapon} = this.state;
        const baseURL = 'https://www.bungie.net';
        const weaponURL = hashdata[{weapon}.displayProperties.icon];

        if (isLoading) {
            return (
                <div>
                    <p>LOADING</p>
                </div>
            )
        }

        if (error) {
            return(
                <div>
                    <p>Error</p>
                </div>
            )
        }

        return (
            <div>
                <div className={"row justify-content-center"}>
                    <div className={"col-6 text-center py-2"}>
                        <img alt="icon" src={baseURL + {weapon && hashdata[weapon].displayProperties.icon}}/>
                        <ReactTooltip/>
                    </div>
                </div>
            </div>
        )
    }

}

export default XUR;

这是我的数据哈希文件中的一个片段：

const hashdata = {
    "31953744": {
        "displayProperties": {
            "description": "",
            "name": "Holy Ground",
            "icon": "/common/destiny2_content/icons/d76ab9a89d00451c6a0c1d779a3e5f98.jpg",
            "hasIcon": true
        },
        "scope": 1,
        "sourceString": "Source: Complete activities and earn rank-up packages on Io.",
        "sourceHash": 315474873,
        "itemHash": 31953744,
        "acquisitionInfo": {
            "runOnlyAcquisitionRewardSite": false
        },
        "stateInfo": {
            "requirements": {
                "entitlementUnavailableMessage": ""
            },
        },
        "presentationInfo": {
            "presentationNodeType": 1,
            "parentPresentationNodeHashes": [
                631010939
            ],
            "displayStyle": 3
        },
        "hash": 259147463,
        "index": 2171,
        "redacted": false,
        "blacklisted": false
    },
    "31953747": {
        "displayProperties": {
            "description": "",
            "name": "Ballet Lover",
            "icon": "/common/destiny2_content/icons/c89eb559068c19f8ed62d56a47f33cfa.jpg",
            "hasIcon": true
        },
        "scope": 1,
        "sourceString": "Source: Complete activities and earn rank-up packages on Io.",
        "sourceHash": 315474873,
        "itemHash": 31953747,
        "acquisitionInfo": {
            "runOnlyAcquisitionRewardSite": false
        },
        "stateInfo": {
            "requirements": {
                "entitlementUnavailableMessage": ""
            },
        },
        "presentationInfo": {
            "presentationNodeType": 1,
            "parentPresentationNodeHashes": [
                631010939
            ],
            "displayStyle": 3
        },
        "hash": 259147462,
        "index": 2170,
        "redacted": false,
        "blacklisted": false
    },
    "32806262": {
        "displayProperties": {
            "description": "\"Our mysterious defender slew a Kell today. Kandak has banned other Risen and put a bounty on the so-called Red Moon Phantom's head.\" —Annals of the Saharan Contested Zone",
            "name": "Cloak of Five Full Moons",
            "icon": "/common/destiny2_content/icons/8e0e7dfa87d5c68262b6027cd22efd40.jpg",
            "hasIcon": true
        },
        "scope": 1,
        "sourceString": "Source: Open Legendary engrams and earn faction rank-up packages.",
        "sourceHash": 3334812276,
        "itemHash": 32806262,
        "acquisitionInfo": {
            "runOnlyAcquisitionRewardSite": false
        },
        "stateInfo": {
            "requirements": {
                "entitlementUnavailableMessage": "Requires Destiny 2: Forsaken"
            },
        },
        "presentationInfo": {
            "presentationNodeType": 2,
            "parentPresentationNodeHashes": [
                3988275539
            ],
            "displayStyle": 3
        },
        "hash": 39866533,
        "index": 510,
        "redacted": false,
        "blacklisted": false
    }
}

有人能告诉我哪里出错了吗？是否可以以这种方式引用哈希表，或者我是否必须将状态哈希值存储在变量中，然后在调用哈希表时引用该变量？

我正在使用 ReactJS。

编辑：我正在尝试调用图标路径并将其放在渲染img标记中的基本 URL 后面，这样我就可以显示特定项目的图标。我已经设法使用 localStorage 并存储哈希的值来完成这项工作，但我想知道是否可以不使用 localStorage，因为代码非常混乱，而且这似乎是一种冗长的做事方式，尤其是当我不得不一次为多个项目创建 localStorage 项目。

标签： javascriptreactjs