React：尽管我为他提供了一个 JSON 对象，但 Rechart 中的 RadarChart 仍会发送错误

Question

我正在练习 React.js，我正在尝试使用 Rechart 库显示有关口袋妖怪统计数据的图表。

我在我的组件状态中以 JSON 对象的形式声明了一个状态。然后我打电话给 API 以提供与我所在州选择的口袋妖怪相对应的正确统计数据。

这是我的问题，如果我在我的 JSON 对象中放置硬值，则当应用程序启动时，图表会使用这些值正确显示。但是当值随着 API 调用而改变时，当图形试图读取我的不同数据时，我在 Web 控制台中收到此警告：

Warning: Received NaN for the `x1` attribute. If this is expected, cast the value to a string.
    in line (created by PolarRadiusAxis)
    in g (created by Layer)
    in Layer (created by PolarRadiusAxis)
    in PolarRadiusAxis (at CompetenceChartPokemon.js:159)
    in svg (created by Surface)
    in Surface (created by RadarChart)
    in div (created by RadarChart)
    in RadarChart (at CompetenceChartPokemon.js:149)

Warning: Received NaN for the `y1` attribute. If this is expected, cast the value to a string.
    in line (created by PolarRadiusAxis)
    in g (created by Layer)
    in Layer (created by PolarRadiusAxis)
    in PolarRadiusAxis (at CompetenceChartPokemon.js:159)
    in svg (created by Surface)
    in Surface (created by RadarChart)
    in div (created by RadarChart)
    in RadarChart (at CompetenceChartPokemon.js:149)
             ... same error for each of the axis

我的图表完全是空的，我只看到代表图表每个轴的线。

为了解决这个问题，我从我的渲染函数中取出了我的图形渲染，实际上我对 API 的调用是异步的，所以我认为当时我的数据可能没有被全部检索到创建图形的调用。

但是当我在 Web 控制台中以 JSON 的形式显示我的状态时，它具有正确的值。我被告知 console.log() 可能需要很长时间才能达到运行因此它会在我的控制台中向我显示正确的值，而更快的图形调用还没有所有这些数据但是它我觉得很奇怪。

我在这里放了一部分代码，

import React, { Component, Fragment } from "react";
import Axios from "axios";
import {
    Radar,
    RadarChart,
    PolarGrid,
    PolarAngleAxis,
    PolarRadiusAxis
} from "recharts";

class CompetenceChartPokemon extends Component {
    constructor(props) {
        super(props);
        this.state = {
            statistic: [
                {
                    subject: "Hp",
                    pokemonStat: 100 //I've put hard value for the 3 first stat to see if they were displaying at launch of app and they are displaying
                },
                {
                    subject: "Attack",
                    pokemonStat: 123
                },
                {
                    subject: "Defense",
                    pokemonStat: 345
                },
                {
                    subject: "Special Attack",
                    pokemonStat: 0
                },
                {
                    subject: "Special Defense",
                    pokemonStat: 0
                },
                {
                    subject: "Speed",
                    pokemonStat: 0
                }
            ],
            pokemonChosen: false,
            pokemonLoading: true,
            pokemonColorAPI: "",
            pokemonIdAPI: "",
            pokemonNameAPI: "",
        };
    }

    handlePokemonNameChange = (e) => {
        this.setState({ pokemonName: e.target.value });
        this.setState({ pokemonChosen: true });
    }

    searchPokemon = () => {
        this.setState({ pokemonLoading: true });
        Axios.get(`http://localhost:5000/getPokemon/pokemonStat/${this.state.pokemonName}`)
            .then(res => {
                if (res.status === 200 && res != null) {
                    let copyJSONArray = this.state.statistic.slice();

                    res.data.stats.map((stat, index) => {
                        copyJSONArray[index] = stat.base_stat;
                    })

                    this.setState({ statistic: copyJSONArray });

                    this.setState({ pokemonIdAPI: res.data.id }); // here I get id of pokemon for a second API call which will give me color of pokemon (info not available in first call)

                    this.setState({ pokemonNameAPI: res.data.name });

                    console.log(res);

                    Axios.get(`http://localhost:5000/getPokemon/pokemonNameFr/${this.state.pokemonIdAPI}`)
                        .then(response => {
                            if (response.status === 200 && response != null) {
                                this.setState({ pokemonColorAPI: response.data.color.name });
                            } else {
                                console.log('problem in second call');
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });

                    this.setState({ pokemonLoading: false });
                } else {
                    console.log('problem in first call');
                }
            })
            .catch(error => {
                console.log(error);
            });
        console.log(this.state.statistic);  //this state is filling correctly here
    }

    renderGraph() {
        let color = "";
        if (this.state.pokemonColorAPI === "black") {
            color = "#1D2525";
        }
        if (this.state.pokemonColorAPI === "blue") {
            color = "#2350B8";
        }
        if (this.state.pokemonColorAPI === "brown") {
            color = "#904F17";
        }
        if (this.state.pokemonColorAPI === "gray") {
            color = "#999999";
        }
        if (this.state.pokemonColorAPI === "green") {
            color = "#438A3B";
        }
        if (this.state.pokemonColorAPI === "pink") {
            color = "#FFB7CE";
        }
        if (this.state.pokemonColorAPI === "purple") {
            color = "#8D5E9B"
        }
        if (this.state.pokemonColorAPI === "red") {
            color = "#BB4B49";
        }
        if (this.state.pokemonColorAPI === "white") {
            color = "#F0EEFF";
        }
        if (this.state.pokemonColorAPI === "yellow") {
            color = "#FFF380";
        }

        if (this.state.pokemonNameAPI === undefined) {
            return null;
        } else {
            return (<React.Fragment>
                {console.log(this.state.statistic)}
                <RadarChart
                    cx={300}
                    cy={250}
                    outerRadius={150}
                    width={500}
                    height={500}
                    data={this.state.statistic}
                >
                    <PolarGrid />
                    <PolarAngleAxis dataKey="subject" />
                    <PolarRadiusAxis />
                    <Radar
                        name={this.state.pokemonName}
                        dataKey="pokemonStat"
                        stroke="#8884d8"
                        fill="#8884d8"
                        fillOpacity={0.6}
                    />
                </RadarChart>
            </React.Fragment>
            )
        }
    }

    render() {
        return (
            <div className="DisplayOnePokemon">
                <div className="TitleSection">
                    <h1>Pokemon Stats</h1>
                    <input type="text" onChange={this.handlePokemonNameChange} value={this.state.pokemonName} />
                    <button onClick={this.searchPokemon}>Search Pokemon stats graph</button>
                </div>
                <div className="DisplaySection">
                    {((!this.state.pokemonChosen) && (this.state.pokemonLoading == false)) ? (
                        <h1>Please choose a Pokemon</h1>
                    ) : (
                        <div>{this.renderGraph()}</div>
                    )}
                </div>
            </div >
        );
    }
}

这是我尝试使用的图表文档的 link https://recharts.org/en-US/examples/SimpleRadarChart，与文档中给出的示例相比，我不明白我做错了什么。

任何帮助将不胜感激:)

Answer 1

我终于让它工作了，问题是我在构造函数中的 JSON 状态声明用数组替换它并在我的 renderGraph 方法中创建一个 JSON 常量，它从我的阵列有效。

React：尽管我为他提供了一个 JSON 对象，但 Rechart 中的 RadarChart 仍会发送错误

React: RadarChart in Rechart send error despite I fournish him a JSON object

api

json

graph

reactjs