提问者:小点点

高阶组件状态正在正确更新,但接收道具的包装组件在状态更改时不会重新呈现


我有这个HOC,它将dailyTime传递到一个包装组件中,该组件的唯一功能是显示所花费的时间。它在初始渲染/页面加载时接收到它的道具。第二个组件接收updateTime道具,并在练习完成时调用getDailyStats,正在正确调用getDailyStats,getDailyStats正在运行,状态正在HOC中更新(渲染中的console.log始终在更新),但是我的包装组件在状态更改时接收更新。我在想是不是和重新编曲有关?无论如何,任何帮助都将不胜感激!

const withDailyStats = WrappedComponent => {

  class withDailyStats extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }


  getDailyStats = async () => {
    const authUser = this.props.authUser.uid
    let userSets = await this.props.firebase.sets()
      .where('userId', '==', authUser)
      .get()

    let data = userSets.docs.map(doc => doc.data());
    let now = moment()
    let pastDay =  moment().startOf('day')
    let pastWeek =  moment().startOf('week')

    let todaySets =  data.filter(set => {
      const setTime = moment((set.createdAt.toDate()))
      return setTime >= pastDay
    })

    let todaysTime = todaySets.reduce((a, b) => a + (parseFloat(b['time']) || 0), 0)
    todaysTime = this.msToTime(todaysTime);

    this.setState({
      dailyTime: todaysTime, 
      todaySets
    })
  }


   msToTime = (s) => {
    // Pad to 2 or 3 digits, default is 2
    function pad(n, z) {
      z = z || 2;
      return ('00' + n).slice(-z);
   }

    var ms = s % 1000;
    s = (s - ms) / 1000;
    var secs = s % 60;
    s = (s - secs) / 60;
    var mins = s % 60;
    var hrs = (s - mins) / 60;

    return pad(hrs) + ':' + pad(mins) + ':' + pad(secs) 
  }

    componentDidMount() {
      this.getDailyStats()
    }


    render() {
      console.log('HOC STATE', this.state.dailyTime)
      return <WrappedComponent dailyTime={this.state.dailyTime} {...this.props} updateTime=. 
              {this.getDailyStats} />;
    }
  };

return compose(
  withFirebase, 
  withAuthentication,
  )(withDailyStats);
}

export default withDailyStats;

这是未更新的包装组件。它以前是功能性的,但我把它改成了类组件,只是作为一个测试。

class DailyStatModule extends React.Component { 
  state = {}

  componentDidMount() {
    console.log('daily mount', this.props.dailyTime)
  }


  render() {
    console.log('DSM', this.props)
    return (
      <DailyWrapper >
        <div style={{textAlign: "center"}}>
          <FontAwesomeIcon icon={faClock} sz="lg" />
          <div>{this.props.dailyTime}</div>
        </div>
      </DailyWrapper>
    );
  }
}




export default withDailyStats(DailyStatModule)

共2个答案

匿名用户

2个组件正在使用你的with DailyStats。getDailyStats由sayComponent1执行,更新with DailyStats的状态。此更新不会被传播到DailyStatMoules组件。抱歉。

从设计上讲,React是单向数据流。在你的例子中,你可以使用上下文api或redux或

还有,看看这里和这里

匿名用户

根据您的代码,我假设包装的组件最初只呈现一次,因为使用了组件。

我认为您可能想要尝试包装组件上的组件didUpdate,以比较后续更新的道具。

详情如下:https://reactjs.org/docs/react-component.html#componentdidupdate