Question

我有一个React项目和用于状态管理的Redux。这些是我的动作。

const mapDispatchToProps = dispatch => ({
  handleChange: (name, value) => { dispatch(handleChange(name, value)) },
  filterRooms: (rooms) => { dispatch(filterRooms(rooms)) }
});

我必须一一使用这两种方法。

this.props.handleChange(pets, true);  // handle changes
this.filterRooms();   // filtering with changing value

filterRooms = () => {
  let {rooms,pets} = this.props; // Here I should get pets === true but it's false.

  // filter by pets
  if (pets) {
    tempRooms = tempRooms.filter(room => room.pets === true);
  }

  this.props.filterRooms(tempRooms);
}

如果我将setTimeout用于第二种方法，那没关系，但是我认为这不是正确的方法。

this.props.handleChange(name, value);
setTimeout(() => {
   this.filterRooms();
}, 500);

Answer 1

似乎下面两个函数依次运行，一个接一个

this.props.handleChange(pets, true);  // handle changes
this.filterRooms();   // filtering with changing value

第一次调度将值更改为Redux。并在那里进行更新（例如使用setTimeout的示例）。但是不要期望Redux的更新值会立即提供给this.filterRooms()。

您有一些Reactjs组件。 Reactjs组件本质上是类或函数。然后包裹在connect中。因此您的代码可能看起来像这样

class Component1 extends React.Component {
    onChange: () => {
        this.props.handleChange(pets, true);  // handle changes
        this.filterRooms();   // filtering with changing value
    }
    // other staff
}

export default connect(mapStateToProps, mapDispatchToProps)(Component1)

React中发生了什么。它实例化类Component1，然后调用connect，后者依次调用您的类的某些方法（即render()或其他方法）。 connect还将一些值从Redux存储传递给您的组件作为道具。 Component1方法已执行，并且可能会更改Redux状态（如您的示例中那样）。但是更新后的道具将不会立即可用。 props只是参数，已由connect函数传递。要更改任何函数的参数，应再次调用它。因此，pets收到更新的connect后，将再次使用更新的pets来调用您的组件。但是会晚一些。

connect()->调用Component1并传递props.pets = false-> Compoentn1将Redux中的pets设置为true-> {{1} }收到更新后的connect()，并用pets呼叫Component1

这就是使用props.pets = true的技巧起作用的原因。 Ste超时只是等待第二次setTimeout

的呼叫

要解决您的确切问题，请不要从Component1阅读pets，如果您知道已更新的话。

props

如何使用Redux获取更新状态

1 个答案: