更新 redux 状态/提交表单时页面重新加载

Posted 2023-03-08

【中文标题】更新 redux 状态/提交表单时页面重新加载

【英文标题】：page reloads when updating redux state/submitting form

【发布时间】：2019-12-23 18:50:57

【问题描述】：

我正在尝试设置一个简单的 react-redux 流程，其中输入更新状态并且表单将组件状态中的值提交给 redux 操作函数。但是，每当表单提交时，页面都会重新加载，当我将 e.preventDefault() 添加到提交函数时，我得到 ​​p>

TypeError: e.preventDefault 不是函数

我尝试将 e.preventDefault() 添加到 submitToRedux 函数，但是当我添加 do 时，我得到 TypeError: e.preventDefault is not a function

这是我的 Child1.js：

import React,  useState  from "react";
import  changeName  from "../redux/name/name.actions";
import  connect  from "react-redux";

function Child1(state) 
  const [name, setName] = useState("");

  const changeHandler = e => 
    e.preventDefault();
    setName(e.target.value);
  ;

  const submitToRedux = e => 
    // e.preventDefault();
    changeName(name);
  ;

  return (
    <div>
      <h2>CHILD ONE</h2>
      <form onSubmit=submitToRedux(name)>
        <input type="text" onChange=changeHandler />
        <button type="submit">SUBMIT</button>
        <h2>name in Child1 state: name</h2>
        <h2>name in redux: state.name.name</h2>
      </form>
    </div>
  );


const mapStateToProps = state => (
  name: state.name
);

export default connect(mapStateToProps)(Child1);

App.js：

import React from "react";

import Child1 from "./components/Child1";

function App() 
  return (
    <div className="App">
      <Child1 />
    </div>
  );


export default App;

root-reducer.js：

import  combineReducers  from "redux";

import nameReducer from "./name/nameReducer";

export default combineReducers(
  name: nameReducer
);

和 nameReducer.js：

import NameActionTypes from "./name.types";

const INITIAL_STATE = 
  name: "Mike"
;

const nameReducer = (state = INITIAL_STATE, action) => 
  switch (action.type) 
    case NameActionTypes.CHANGE_NAME:
      return 
        ...state,
        name: action.payload
      ;
    default:
      return state;
  
;

export default nameReducer;

我希望它将 Child1.js 中的 state.name.name 值更新为在提交表单时从 Child1.js 组件中的状态提交的任何内容，但它只是重新加载页面，因为我没有保留它到本地存储它只是保持空白。当我添加e.preventDefault() 时，我希望它在表单提交时停止重新加载页面，但它会说

e.preventDefault 不是函数

【参考方案1】：

这是因为您没有将提交事件传递给 submitToRedux 函数。 你应该像这样将它传递给你的函数：

<form onSubmit=(e) => submitToRedux(e, name)>

然后你在你的函数中处理它：

const submitToRedux = (e, name) => 
    e.preventDefault();
    changeName(name);
  ;

child1.js 将是这样的：

import React,  useState  from "react";
import  changeName  from "../redux/name/name.actions";
import  connect  from "react-redux";

function Child1(state) 
  const [name, setName] = useState("");

  const changeHandler = e => 
    e.preventDefault();
    setName(e.target.value);
  ;

  const submitToRedux = (e, name) => 
    e.preventDefault();
    changeName(name);
  ;

  return (
    <div>
      <h2>CHILD ONE</h2>
      <form onSubmit=(e) => submitToRedux(e, name)>
        <input type="text" onChange=changeHandler />
        <button type="submit">SUBMIT</button>
        <h2>name in Child1 state: name</h2>
        <h2>name in redux: state.name.name</h2>
      </form>
    </div>
  );


const mapStateToProps = state => (
  name: state.name
);

export default connect(mapStateToProps)(Child1);

【讨论】：

这行得通，而且我忘了像 const submitToRedux = (e, name) => console.log("name: ", name); e.preventDefault(); props.dispatch(changeName(name)); console.log("from submittoredux function", props.name.name); ;

那样将 dispatch() 添加到我的 submitToRedux 函数中

【参考方案2】：

您的代码存在多个问题，

首先，您正在编写 state 作为 Child1 组件的参数

function Child1(state) 

应该是，

function Child1(props) 

您应该将此props 设置为您的state，

const [name, setName] = useState(props.name);

你的input应该被控制，

<input type="text" onChange=changeHandler value=name />

你应该像这样打印name，

<h2>name in Child1 state: name</h2>
<h2>name in redux: props.name</h2>

你的表单提交方法应该是这样的，

<form onSubmit=submitToRedux>

最后是你的 submitToRedux 函数，

const submitToRedux = e => 
    e.preventDefault();  //Now this will work
    changeName(name); //As we have controlled input, we direclty take name from state
;

【参考方案3】：

您只需要传递表单提交后将被调用的函数。

<form onSubmit=submitToRedux>

但实际上你是立即调用它：

<form onSubmit=submitToRedux(name)>

当您只是传递函数时，表单会使用提交事件作为参数来调用它。 在您的代码中，错误表明参数e 应该包含一个函数preventDefault，这显然没有在您作为参数传入的变量中定义：submitToRedux(name)