Question

编辑9/5/17：
事实证明我在React中的反应代码的不同部分存在问题，这让我相信我的堆栈没有正确重置。我在/ Profile页面上呈现的少数几个组件之一就是在一个空数组上调用array.length，而这个错误阻止了我的代码运行，我的浏览器也冻结了。感谢您无视

当组件卸载时，我试图在我的商店中重置一个对象的状态（让它称之为UID）。

当用户点击用户名（发布帖子的用户）时，UID的初始状态是一个空字符串我正在渲染一个配置文件组件，但在呈现配置文件组件之前，我正在填充UID，并呈现与UID匹配的配置文件组件。

我现在要做的是清除配置文件组件卸载时的UID，因此如果用户点击其他用户名，我可以呈现不同的配置文件。

个人资料组件：

class Profile extends Component {
  componentWillUnmount() {
    this.props.clearUserUid()
  }
  render() {
    return (
      <Grid id="profile">

        <Grid.Row>
          <Grid.Column className='profileheader'>
            <ProfileHeader />
            </Grid.Column>
          </Grid.Row>

          <Grid.Row>
            <Grid.Column>
              <AddSocial/>
              <ListOfSocialLinks/>
            </Grid.Column>
          </Grid.Row>

         </Grid>
    );
  }
}

动作

export const clearUserUid = uid => ({
  type: 'CLEAR_UID', payload: ''
})

减速机：

import initialState from './initialState';

export default function (userUid = initialState.userUid, action) {
  switch (action.type) {
    case 'CLEAR_UID':
      return action.payload;
    default:
      return userUid;
  }

}

初始状态

userUid: '',

组件监听userUid

class ListOfSocialLinks extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    if(this.props.userUid && this.props.userUid.length > 0) {
      firebase.database().ref(`users/${this.props.userUid}/social`).on('value', snapshot => this.props.fetchSocial(snapshot.val()));
    }
    else {
      firebase.database().ref(`users/${this.props.userData.uid}`).on('value', snapshot => {
       return this.props.fetchSocial(snapshot.val())
       })
     }
  }


  render() {
    const { social, userData } = this.props;
    return (<div className="social"> { this.renderSocial(social, userData) }</div>);
   }
}

userData.uid始终可供用户查看自己的个人资料。

clearUserUid操作运行，我的商店状态变为空字符串，但是，当我在配置文件组件卸载后单击其他用户时，我在页面上收到错误。

如何正确地将商店的状态重置为空字符串？

Answer 1

看起来你的示例中缺少一些代码，但我的猜测是组件本身实际上没有卸载。当属性通过redux更改时，它不会挂载/卸载，只是重新渲染。

您可以使用一些事件。我的建议是使用componentWillUpdate来查看参数uid已经改变并触发清除。

// Invoked whenever there is a prop change
// Called BEFORE render
componentWillReceiveProps(nextProps) {
    // Not called for the initial render
    // Previous props can be accessed by this.props
    // Calling setState here does not trigger an an additional re-render
}

// Called IMMEDIATELY BEFORE a render
componentWillUpdate(nextProps, nextState){
    // You cannot use this.setState() in this method
}

// Called IMMEDIATELY AFTER a render
componentDidUpdate(prevProps, prevState){
}

如果不是这种情况，您可能需要使用更多示例重新解决问题。

React，Redux使用生命周期方法清除状态

1 个答案: