Question

我有一些图（用Graph js制作），我想在其中显示数据。

似乎我可以获取它们，并且数据显示为制成的，但是我无法在实际图形中显示它们。我尝试了不同的方法，甚至将其直接映射到return字段中，但仍然无法正常工作，并显示未定义。

const API = 'http://127.0.0.1:5000/models/';
const DEFAULT_QUERY = 'Vno';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: {},
            hits: [],
            isLoading: false,
            error: null
        };
    }

    getChartData() {
        const hits = this.state;
        const nextMonths = ['February', 'March', 'April', 'June', 'July', 'August', 'September', 'October'];

        this.setState({
            chartData: {
                labels: hits.pha,
                datasets: [
                    {
                        label: 'Dataset',
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: ['rgba(243, 129, 129, 0.4)', 'rgba(75,192,192,0.4)',
                            'rgba(249, 237, 105, 0.4)',
                            'rgba(184, 59, 94, 0.4)',
                            'rgba(106, 44, 112, 0.4)',
                            'rgba(0, 184, 169, 0.4)',
                            'rgba(135, 133, 162, 0.4)'],
                        borderColor: '#fae3d9',
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: '#212121)',
                        pointBackgroundColor: '#252a34',
                        pointBorderWidth: 3,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                        pointHoverBorderColor: 'rgba(220,220,220,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 5,
                        pointHitRadius: 10,
                        data: [50, 30, 40, 60]
                    }
                ],
            }
        })
    }

    componentDidMount() {
        this.setState({ isLoading: true });
        fetch(API + DEFAULT_QUERY)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Something went wrong ...');
                }
            })
            .then(data => this.setState({ hits: data.hits, isLoading: false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }

    componentWillMount() {
        this.getChartData();
    }

    render() {
        const { hits, isLoading, error } = this.state;
        if (error) {
            return <p>{error.message}</p>;
        }

        if (isLoading) {
            return <div className="react-spinner">
                <MDSpinner size={100} />
            </div>
        }
        return (
            <div className="App">
                <Navbar bg="light" variant="light">
                    <Navbar.Brand href="#">Aeroconseil</Navbar.Brand>
                    <Nav className="mr-auto">
                    </Nav>
                </Navbar>
                <hr className="hr-line"></hr>
                <div className="container">
                    <Chart chartData={this.state.chartData} />
                    <LineGraph chartData={this.state.chartData} />
                    <ul>
                        {hits.map(hit =>
                            <li key={hit.name}>
                                <a>{hit.pha}</a>
                            </li>
                        )}
                    </ul>
                </div>

            </div>
        );
    }
}

export default App;

我希望显示来自API的数据，但显示未定义。

Answer 1

一些可能有问题的事情

在INSTALL_CUSTOM(boost)定义的第一行中，您应该使用解构，因此应该是

getCharData

生命周期方法getCharData() { const { hits } = this.state; // ... }在React 16.3中为deprecated，并被componentWillMount取代，也许这就是为什么您获得UNSAFE_componentWillMount
在React State Updates May Be Asynchronous中，因此您可以尝试使用undefined生命周期方法

componentDidUpdate

Answer 2

我设法解决了。我认为这不是一个很好的解决方案，但是如果有人有一些想法或遇到类似我的问题。（我不需要在getChartData（）上调用匹配项，也无需在render（）常量上调用它。）

let hit_labels = []
      let hit_values = []

      for(let item in this.state.hits){
        hit_labels.push(this.state.hits[item].name);
        let value = parseInt(this.state.hits[item].pha);

        hit_values.push(isNaN(value) ? 0 : value);
      }

      this.state.chartData.labels = hit_labels;
      this.state.chartData.datasets[0].data = hit_values;
      console.log(this.state.chartData);

无法显示来自API的数据

2 个答案: