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

Question

我正在尝试设置一个简单的 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 不是函数

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

Answer 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
};

Answer 3

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

<form onSubmit={submitToRedux}>

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

<form onSubmit={submitToRedux(name)}>

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