Reactjs+Redux：异步点击事件后如何获取this.props的值

嘿，这个问题我之前在做Redux异步项目时也踩过坑，给你几个实用的解决方案：

1. 先确保事件处理函数的this绑定正确 #

这是最常见的坑——如果你的点击回调函数没有正确绑定this，那在函数里访问this.props肯定会出问题。有两种简单的绑定方式：

方式一：在constructor里手动绑定 #

class AsyncApp extends Component {
  constructor(props) {
    super(props);
    // 绑定handleSearch的this到当前组件实例
    this.handleSearch = this.handleSearch.bind(this);
  }

  handleSearch() {
    // 这里就能正常访问this.props.fetchJokes了
    this.props.fetchJokes();
  }

  render() {
    return <SearchJokes onClick={this.handleSearch} />;
  }
}

方式二：使用箭头函数定义方法 #

箭头函数会自动继承外层的this，省去手动绑定的步骤：

class AsyncApp extends Component {
  // 用箭头函数定义处理函数
  handleSearch = () => {
    this.props.fetchJokes();
    // 这里可以直接访问所有this.props里的属性
  }

  render() {
    return <SearchJokes onClick={this.handleSearch} />;
  }
}

2. 异步Action完成后，获取更新后的Props #

因为Redux-Thunk的异步操作是异步执行的，如果你想在fetchJokes完成后拿到更新后的props（比如新获取的笑话数据），不能直接在调用this.props.fetchJokes()后马上取，得等Redux Store更新、组件重新渲染后才行。这时候可以用类组件的生命周期方法：

使用componentDidUpdate监听props变化 #

componentDidUpdate(prevProps) {
  // 对比前后props的jokes数据，当数据更新时做处理
  if (prevProps.jokes !== this.props.jokes) {
    console.log("最新的笑话数据：", this.props.jokes);
    // 在这里执行需要用到新props的逻辑
  }
}

注意：一定要加上prevProps和当前props的对比，不然会导致无限循环更新。

3. 检查Connect的映射是否正确 #

如果你的this.props里根本找不到fetchJokes或者jokes，那大概率是connect函数的映射写错了。确保你的mapStateToProps和mapDispatchToProps正确：

// 把Redux Store里的状态映射到组件props
const mapStateToProps = (state) => {
  return {
    jokes: state.jokes, // 这里要对应你的reducer定义的state结构
    isLoading: state.isLoading,
    error: state.error
  };
};

// 把Action Creator绑定到dispatch，映射到组件props
const mapDispatchToProps = {
  fetchJokes // 简写方式，connect会自动帮你绑定dispatch
};

// 最后别忘了用connect包裹组件
export default connect(mapStateToProps, mapDispatchToProps)(AsyncApp);

4. 需要传递参数的场景 #

如果你的搜索需要传递参数（比如用户输入的关键词），可以在子组件里通过箭头函数传递，父组件接收后再调用异步Action：

子组件SearchJokes里的按钮 #

// 假设子组件里有输入框的state：inputValue
<button onClick={() => props.onClick(this.state.inputValue)}>搜索笑话</button>

父组件的处理函数 #

handleSearch = (searchTerm) => {
  // 调用异步Action并传入参数
  this.props.fetchJokes(searchTerm);
  // 如果需要用searchTerm，直接用参数即可，不用从props拿
}

内容的提问来源于stack exchange，提问作者jwesonga