从api获取值并显示在reactjs应用程序饼图中

时间:2019-07-15 07:08:38

标签: python-3.x reactjs api

我从返回值的地方制作了API,现在尝试获取这些值并使用reactjs在饼图中显示,但无法获取。


class Graph extends Component {
    ComponentWillMount(){
        fetch('http://localhost:3010/analysis')
        .then(response{response.json()})
        .then(data => console.log(response))
    }
    render() {
        return (
            <ReactFC
        {...pieConfigs}/>
            );
    }
}

export default Graph;

这是我的代码。谁能告诉我要在react app中显示饼图需要做哪些更改?

2 个答案:

答案 0 :(得分:0)

问题是您在卸载组件后立即获取API,请尝试

ComponentDidMount(){
    fetch('http://localhost:3010/analysis')
    .then(response{response.json()})
    .then(data => console.log(response))
}

答案 1 :(得分:0)

示例:

class Graph extends Component {
    state = { pieConfigs }
    componentDidMount(){
        fetch('http://localhost:3010/analysis')
        .then(response => response.json())
        .then(data => this.setState({ data }))
    }
    render() {
        return (
            <ReactFC {...this.state.pieConfigs}/>
        );
    }
}

说明:
1.从componentDidMount而不是componentWillMount获取数据。您可以看到this article作为参考。
2.将状态/属性用于与ui相关的数据。您可以使用state和setState更新数据并将其作为道具传递给ReactFC。更新状态或道具会触发重新渲染,因此ui会是最新的。