Question

我最近尝试将我的第一个react-app部署到网络上。该网站是关于查找某个宠物小精灵的详细信息并制作自己的卡片。

我使用Mozilla作为我的主浏览器，一切都运行良好。但是当我在chrome上请求口袋妖怪请求（GET）时，我没有得到任何结果。如果我看一下网络控制台，我会收到301错误（来自磁盘缓存）。这是什么意思？您可以访问我的网站：

https://daan.boschmans.mtantwerp.eu/

我使用npm run build命令部署了我的应用。我在公共文件夹中添加了.htaccess文件，其中包含正确的行。

获取请求：

export const getPokemonSprites = (name) => {
    return fetch(`https://pokeapi.co/api/v2/pokemon-form/${name}`).then((response) => {
        if(response.statusText === 'OK') {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
}
export const getPokemonMoves = (name) => {
    return fetch(`https://pokeapi.co/api/v2/pokemon/${name}`).then((response) => {
        if(response.statusText === 'OK') {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
}

这是我如何处理GET电话：

 getPokeData() {

        if (this.state.searchValue && this.state.name !== this.state.searchValue) {

            this.setState({ isLoading: true, hasError: false, name: "", sprites: [], moves: [], height: "", weight:"", specials: [], base_experience: "", type: [], stats:[], items: [], });

            Promise.all([ getPokemonSprites(this.state.searchValue),getPokemonMoves(this.state.searchValue)])

                .then( ([spriteList, pokeDetails]) => {

                    const sprites   = Object.values(spriteList.sprites);
                    const moves     = Object.entries(pokeDetails.moves);
                    const abilities = Object.entries(pokeDetails.abilities);
                    const types     = Object.entries(pokeDetails.types);
                    const stats     = Object.entries(pokeDetails.stats);


                    for (const [ , value] of Object.entries(moves)) {

                        this.state.moves.push(value[1].move.name);
                    }

                    for (const [, value] of Object.entries(types)) {

                        this.state.type.push(value[1].type.name);

                    }

                    for (const [, value] of Object.entries(abilities)) {

                        this.state.specials.push(value[1].ability.name);

                    }

                    for (const [, value] of Object.entries(stats)) {

                            let statsValue = `${value[1].stat.name}: ${value[1].base_stat}`;

                            this.state.stats.push(statsValue);
                    }

                    this.setState({sprites, name: spriteList.name,  height: pokeDetails.height, weight: pokeDetails.weight, base_experience: pokeDetails.base_experience })

                    }).then(() => { this.setState({isLoading: false, searchValue: ""})})
                      .catch(() => { this.setState({isLoading: false, searchValue: "", hasError: true}) })

        }
    }

任何提示都会非常感激

由于

Answer 1

首先，不错的网站。看起来像一个有趣的小项目。

我在Chrome上试用了这个网站，它对我来说很好。

看起来好像有一个缓存内容的服务工作者。如果您使用了create-react-app，它会附带一个服务工作者，并且看起来好像是在浏览器中缓存API调用的内容。

我怀疑您的Chrome缓存存在问题。您可以尝试按照此建议here清除缓存，也可以尝试重新安装Chrome。

公共API调用Mozilla而不是Chrome（react-app）

1 个答案: