React-recompse - 仅初始化一次属性

Question

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

我正在尝试声明一个属性并使用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 以响应应用程序用户操作，并且对其进行任何重新计算都会消除所有这些更改。是否可以只初始化一次？
另外，对user 或allUsers 的更改只是本地的。在用户单击“保存”之前，这些更改不会写入redux 存储。在withHandlers 内部，我正在做类似user.name = 'some name' 的事情。我希望在将这些更改写入redux 之前，存储user 或allUsers 更新不应该导致recentUsers 在withProps 中重新初始化。

Answer 1

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

对于redux，状态突变属于reducers。

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