有没有一种方法可以在装载时从react函数中调度操作

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);

use-effect钩子只触发sendRequest调用一次，当组件挂载时，我们通过传递一个空数组作为第二个参数来实现这一点。你可以在这里阅读更多https://reactjs.org/docs/hooks-reference.html#useeffect

如果你想使用其他方法而不是mapStateToProps或mapDispatchToProps函数，我建议你也阅读这篇文章https://react-redux.js.org/next/api/hooks#hooks