Question

我正在开发一个由图表组件和一些其他组件组成的小型反应应用程序。图表组件是一个单独的文件/组件/子组件。当我单击主容器中的按钮时，它会调用一个promise（使用axio）并返回一些数据作为响应。此响应数据设置为状态，并且该状态作为props传递给图表组件。但是图表不会加载。这是因为图表已经被加载，因为图表空白的初始状态也是空的。是否有任何方法只在promise返回数据后呈现图表组件？

这是我的代码

按钮点击事件

  ClickMe = () =>{

         axios.get('http://xyzsdsd.com/abc')
            .then((response)=>{

               this.setState({
                 tags:response.data
               });

               console.log(this.state.tags);

            }).catch((err)=>{

              console.log(err);
            });


  }

渲染功能

  render(){
        return(
        <div>
         <otherComponents/>
         <chart data={this.state.tags}/>
        </div>

         );
}

Answer 1

在渲染中添加条件，仅在state.tags对象有效时渲染图表组件。在初始渲染时，不会渲染图表。当您的AJAX调用返回并调用setState（）时，将使用非null state.tags再次调用render（），从而呈现您的图表。

setString("KEY_" "token", token);

Answer 2

对于良好的用户体验，您可能需要考虑组件或UI部分可能遇到的不同状态和流程。

所以从头顶我会有3个州。 Empty slate，loading（因为您接触到服务器也可能需要一些时间）和chart with data。

因此，根据状态，您可能希望显示不同的组件。

我将通过构造函数或在getInitialState函数中没有ES6的情况下在ES6中设置InitialState。

如果您想要使用组件onLoad的ajax axios.get，您应该考虑放置componentDidMount。这也适用于React-Router。因此，无论何时导航到ChartComponent，它都会在挂载时加载。

如果您碰巧认识到渲染函数中的if语句变得复杂，因为业务逻辑需要更多。您一定要查看Redux（http://redux.js.org/)in与React的组合，以便更好地控制状态和数据流。

在这个免费视频系列中可以找到如何用redux构建反应应用程序的真正伟大的内容。 https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/building-react-applications-with-idiomatic-redux

希望有所帮助。

从按钮单击事件渲染React组件

2 个答案: