如果在react中使用useState而不是this.state，如何将状态传递给调度操作

Question

我是一个刚开始使用react的初学者，在使用react redu和useState时，在状态管理方面遇到了困难。在下面的代码中，我基本上遵循一个教程，该教程将this.state传递给handleSubmit函数中的调度操作createProject，如下所示。

class CreateProject extends Component {
state = {
title: '',
content: ''
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();
// console.log(this.state);
this.props.createProject(this.state);
}
render() {
return (
<div className="container">
<form className="white" onSubmit={this.handleSubmit}>
<h5 className="grey-text text-darken-3">Create a New Project</h5>
<div className="input-field">
<input type="text" id='title' onChange={this.handleChange} />
<label htmlFor="title">Project Title</label>
</div>
<div className="input-field">
<textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
<label htmlFor="content">Project Content</label>
</div>
<div className="input-field">
<button className="btn pink lighten-1">Create</button>
</div>
</form>
</div>
)
}
}
const mapDispatchToProps = dispatch => {
return {
createProject: (project) => dispatch(createProject(project))
}
}
export default connect(null, mapDispatchToProps)(CreateProject)

现在，我使用的不是Class组件，而是函数组件和useState钩子。在handleSubmit函数中，我如何将状态传递给this.props.createProject()，因为在功能组件的情况下没有定义this.props，以及如何传递状态来代替this.state，是projectinfo存储状态还是其他什么，我很困惑。

TLDR我想从useState钩子的角度重写this.props.createProject(this.state)行。

下面是我写的代码：

const CreateProject = () => {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');

const handleSubmit = (e) => {
e.preventDefault();
const projectinfo = { title, content }
this.props.createProject(projectinfo);
}
return(
<div className="container">
<form onSubmit={handleSubmit} className="white">
<h5 className="grey-text text-darken-3">Create Task</h5>
<div className="input-field">
<label htmlFor="title">Title</label>
<input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
</div>
<div className="input-field">
<label htmlFor="content">Content</label>
<textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>

</div>
<button className="btn pink lighten-1 z-depth-0">Create</button>
</form>
</div>
);
}
const mapDispatchToProps  = (dispatch) =>{
return{
createProject: (project) => dispatch(createProject(project)),
};
}
export default connect(null, mapDispatchToProps)(CreateProject);

如有任何帮助或线索，我们将不胜感激。非常感谢。

Answer 1

只想添加一些使用react钩子(特别是useDispatch(的方法。

使用钩子，您不需要使用connect((和mapDispatchToProps。相反，你可以这样做：

const CreateProject = () => {
const dispatch = useDispatch();
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
const projectinfo = { title, content }
// Use dispatch here
dispatch(createProject(projectinfo));
}
return(
<div className="container">
<form onSubmit={handleSubmit} className="white">
<h5 className="grey-text text-darken-3">Create Task</h5>
<div className="input-field">
<label htmlFor="title">Title</label>
<input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
</div>
<div className="input-field">
<label htmlFor="content">Content</label>
<textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>

</div>
<button className="btn pink lighten-1 z-depth-0">Create</button>
</form>
</div>
);
}
export default CreateProject

createProject()是你的动作创造者。

您可以在此处阅读有关useDispatch的更多信息：https://react-redux.js.org/api/hooks#usedispatch

Answer 2

您的调度无法工作，因为您正试图通过this.props访问它。假设mapDispatchToProps中调度调用中的createProject调用是有效的，并且该文件的作用域中有一个createProject函数，那么您需要做的是：

const CreateProject = (props) => { // Get props from the parameter.
const [title, setTitle] = useState('');
const [content, setContent] = useState('');

const handleSubmit = (e) => {
e.preventDefault();
const projectinfo = { title, content }
props.createProject(projectinfo); // Replace this.props and use props
}
return(
<div className="container">
<form onSubmit={handleSubmit} className="white">
<h5 className="grey-text text-darken-3">Create Task</h5>
<div className="input-field">
<label htmlFor="title">Title</label>
<input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
</div>
<div className="input-field">
<label htmlFor="content">Content</label>
<textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>

</div>
<button className="btn pink lighten-1 z-depth-0">Create</button>
</form>
</div>
);
}
const mapDispatchToProps  = (dispatch) =>{
return{
createProject: (project) => dispatch(createProject(project)),
};
}
export default connect(null, mapDispatchToProps)(CreateProject);

这是可行的。我希望这能回答并解决你的问题。