Question

我有一个显示功能列表的react函数，我使用Redux来管理应用程序的状态。我只想知道服务器挂载时是否有办法向服务器请求内容。

componentDidMount = () =>{
     this.props.sendRequest()
}

我知道如何使用React组件而不是React函数来实现它。

Answer 1

您需要使用一个名为useEffect的react钩子才能实现componentDidMount行为：

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { sendRequest } from 'your-action-location'
import { bindActionCreators } from "redux";

const YourComponent = ({ sendRequest }) => {

 useEffect(() => {
  sendRequest()
 },[])


 return (
  <div>
    {/* Your JSX*/}
  </div>
 )
} 

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
   {
    sendRequest
   },
  dispatch
  );
 };

 export default connect(null, mapDispatchToProps)(YourComponent);

使用效果钩子仅触发一次sendRequest调用，在安装组件时，我们通过传递一个空数组作为第二个参数来实现。您可以在这里https://reactjs.org/docs/hooks-reference.html#useeffect

了解更多信息

钩子还有许多其他方式来调度您的动作，如果您想使用其他方法而不是mapStateToProps或mapDispatchToProps函数https://react-redux.js.org/next/api/hooks#hooks

，我建议您也阅读一下

挂载时是否有一种方法可以从React函数中分派动作？

1 个答案: