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

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

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

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; 我想从 this.props.createProject(this.state) 钩子的角度重写 useState 行。

下面是我写的代码：

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

任何帮助或线索来理解这一点将不胜感激。谢谢！

解决方法

您的派遣无效，因为您试图通过 return IntegrationFlows .from(yieldCurveConversionResultChannel) .wireTap(notificationChannel,wt -> wt.selector(m -> (m.getPayload() instanceof Throwable))) .get(); 访问它。假设 mapDispatchToProps 中的 dispatch 调用中的 return IntegrationFlows .from(notificationChannel) .handle(commonNotificationService) .get(); 调用是有效的，并且在该文件的范围内有一个 this.props 函数可用，您需要做的是：

createProject

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

,

只想添加一些使用 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