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

Question

我是一个刚开始接触 React 的初学者，在使用 react-redux 和 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

您的派送无效，因为您正试图通过 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);

这行得通。我希望这回答并解决了您的问题。

Answer 2

只是想添加一些使用 React Hooks 的方法（特别是 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

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

How to pass in the state to the dispatch action if using useState instead of this.state in react?

reactjs

react-redux

redux-reducers

use-state