首页 文章

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

提问于
浏览 次
0

我正在开发一个由图表组件和一些其他组件组成的小型反应应用程序 . 图表组件是一个单独的文件/组件/子组件 . 当我单击主容器中的按钮时，它会调用一个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>

         );
}
javascript reactjs asynchronous

2 回答

  • 3

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

    render(){
  let chart;

  if (this.state.tags) {
    chart = <chart data={this.state.tags}/>;
  }

  return (
    <div>
      <otherComponents/>
      {chart}
    </div>
  );
}
    回复于
  • 1

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

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

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

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

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

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

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

    希望有所帮助 .

    回复于

相关问题