0

我是Reactjs初学者，刚刚开始研究Reactjs使用react-recompose模块的现有项目。

我正在尝试声明一个属性并使用withProps. 属性初始化将使用很少的其他现有属性。我将此属性传递给几个子类，这些子类将通过从父类调用处理程序来多次修改此属性。
最后，用户将单击“保存”，并将属性状态发送到服务器。
实际发生的情况是在子类调用修改此属性的父处理程序之后，withProps 有时会在其间调用父处理程序，将属性重新初始化为其初始状态；这导致最近对属性的更改丢失。奇怪的withProps是，每次修改属性时都不会被调用，但有时会出现不可预测的情况。

我想知道如何定义一个属性，该属性被初始化为其他几个属性的产物；并且仅在页面加载时初始化一次。

请在下面找到示例代码。

const mapStateToProps = state  => ({
  user: state.users.user,
  allUsers: state.users.allUsers  
}); 



export function getRecentUsers(user, allUsers) {
    //Based on some criteria return some of the users from allUsers
    return recentUsers; 
}

export const Container = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withProps(({ user, allUsers, recentUsers}) => {
    return {
        recentUsers: getRecentUsers(user, allUsers)
    };
  }), 
  withHandlers({
    modifyRecentUsers: ({ recentUsers }) => (someUsers, myThis) => {
      //Modify recentUsers here
      myThis.setState({recentUsers : recentUsers});
    },
  ...
  ...
}(Users);

export const Users = ({
  user,
  allUsers,
  recentUsers,
  modifyRecentUsers
  }) => (
  <Child
    user={user}
    allUsers={allUsers}
    myThis={user.myThis}
    recentUsers={recentUsers}
    modifyRecentUsers={modifyRecentUsers}            
  />
 );

export class Child extends Component {
  constructor(props) {
    super(props);
    this.user=this.props.user;
    this.allUsers=this.props.allUsers;
    this.myThis=this.props.myThis;
    this.recentUsers=this.props.recentUsers;
    this.modifyRecentUsers=this.props.modifyRecentUsers;    
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.recentUsers != undefined) {
      this.recentUsers = nextProps.recentUsers;
      this.setState({        
        recentUsers: nextProps.recentUsers
      });
    }
  }

  updateRecentUsers() {
    this.modifyRecentUsers(someUsers);
  }

     render() {
        return (
            //some html
        );
     }
 }

编辑

在我发布的示例代码中，recentUsers是一个派生自user并allUsers声明和初始化的属性withProps。user并且allUsers是redux商店的一部分。
即使其中一个user或allUsers属性发生更改，我也不想recentUsers在它被初始化后被重新计算withProps。因为，在初始化之后withProps，我正在更新recentUsers以响应应用程序用户操作，并且它的任何重新计算都会消除所有这些更改。是否可以只初始化一次？
此外，对userorallUsers的更改只是本地的。redux在用户单击“保存”之前，这些更改不会写入存储。在里面withHandlers我正在做类似的事情user.name = 'some name'. 我希望在将这些更改写入redux存储user或更新之前不会导致inallUsers重新初始化。recentUserswithProps

4

1 回答 1

0

withProps为您提供通常从某些东西计算的只读道具。您的调用myThis.setState不会更新该对象。它在组件的状态下创建一个具有相同名称的键。

在 redux 中，状态突变属于 reducer。

如果recentUsers可以从并且两者都在 redux 中计算users，allUsers那么你withProps就可以了。modifyRecentUsers错的是你的。它应该dispatch是一个modifyUser动作。然后您reducer将更新状态（users和/或allUsers）并且您的组件将重新渲染。这将再次触发您withProps，这将从recentUsers和users重新计算allUsers。

于 2018-04-05T03:54:24.077 回答