Question

我是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中初始化之后，我正在更新user以响应应用程序用户操作，并且任何重新计算都会消除所有这些更改。是否可以只初始化一次？
另外，对allUsers或redux的更改只是本地的。在用户点击“保存”之前，这些更改不会写入withHandlers商店。在user.name = 'some name'内，我正在执行redux之类的操作。我希望在将这些更改写入user存储之前，allUsers或recentUsers更新不应导致withProps中static func isValidUrl (urlString: String?) -> Bool { if let urlString = urlString { if let url = URL(string: urlString) { return UIApplication.shared.canOpenURL(url) } } return false }的重新初始化。

Answer 1

withProps为您提供通常根据某些内容计算的 readonly 道具。您对myThis.setState的调用不会更新该对象。它正在组件的状态中创建一个具有相同名称的密钥。

使用redux，状态突变属于减速器。

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

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

1 个答案: