Question

所以我的应用程序有一个包含主页数据的表格。如果用户导航到另一个页面，输入一些数据，然后按Home返回主页面，表格应相应更新。

我正在尝试使用componentWillUpdate（）重新呈现页面，但它会导致与服务器的无限循环请求。

class Dashboard extends Component{
  constructor(props){
    super(props);
    this.state = {
     table: null
    }
  }
  componentWillMount(){
    this.props.retrieveDashboard();
  }

  componentWillUpdate(nextProps, nextState){
   nextProps.retrieveDashboard();
   if (nextProps.users !== this.props.users){
     this.setState({
      table: nextProps.users
     });
   }
}



function mapStateToProps(state){
  return {
    users: state.auth.dash
  };
}

export default connect(mapStateToProps,actions)(Dashboard);

我尝试输入条件以确保它不会更新然后重新渲染一百万次，但条件似乎没有做任何事情。有什么想法吗？

编辑： users是一个JSON对象数组，如下所示： [{object1}，{object2}]

这是retrieveDashboard（）的代码：

export function retrieveDashboard(){
  return function(dispatch){
    axios.get(`${SERVER_URL}/dashboard`)
         .then(response => {
           dispatch({type: USERS, payload: response.data});
          })
         .catch(() => console.log("error"))
  }
}

我的印象是商店中的数据只能通过axios调用和调度进行更新，因此如果数据库已被修改，我必须再次调用它。

Answer 1

所以你使用！==比较两个不同的对象实例，这不是在javascript中比较对象的正确方法。您想要对对象进行浅层或深度比较。请参阅我在评论中发布的链接：How to determine equality for two JavaScript objects?

正如我所提到的，我们喜欢使用lodash.js _.isEqual（）来比较对象。

使用componentDidUpdate更新组件状态而不触发无限重新渲染

1 个答案: