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

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。

编辑： 我正在尝试调用图标路径，并将其放置在renders img标签中的基本URL后面，这样我就可以显示特定项目的图标。我已经设法使用localStorage并存储了哈希值来工作，但是我想知道如果不使用localStorage的话，是否有可能做到这一点，因为代码令人难以置信，而且做事方式似乎很漫长，特别是当我不得不一次为多个项目创建localStorage项目。