Question

我正在阅读React-Redux教程。但是，由于所有示例都是由类类型的组件组成的，因此我试图将其更改为功能组件。但这是行不通的。我在做什么错了？

这是原始版本

import React from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";

class AddTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { input: "" };
  }

  updateInput = input => {
    this.setState({ input });
  };

  handleAddTodo = () => {
    this.props.addTodo(this.state.input);
    this.setState({ input: "" });
  };

  render() {
    return (
      <div>
        <input
          onChange={e => this.updateInput(e.target.value)}
          value={this.state.input}
        />
        <button className="add-todo" onClick={this.handleAddTodo}>
          Add Todo
        </button>
      </div>
    );
  }
}

export default connect(null, { addTodo })(AddTodo);
// export default AddTodo;

这是我的代码

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";

function AddTodo() {
  
  const initialState = {
    input: "",
  };

  const [inputValue, setInput] = useState(initialState);

  const updateInput = (input) => {
    setInput({ input });
  };

  const handleAddTodo = () => {
    addTodo(inputValue);
    setInput({ input: "" });
  };

  return (
    <div>
      <input onChange={(e) => updateInput(e.target.value)} value={input} />
      <button className="add-todo" onClick={handleAddTodo}>
        Add Todo
      </button>
    </div>
  );
}

export default connect(null, { addTodo })(AddTodo);
// export default AddTodo;

错误消息是： TypeError （0，_react.useState）不是函数

这是原始代码 enter link description here

Answer 1

您的初始状态是一个对象（为什么？），因此需要修复input元素：

<input onChange={(e) => updateInput(e.target.value)} value={inputValue.input} />

您的addTodo操作已连接到组件的分派，因此Redux通过props注入它，而您使用的操作本身没有dispatch：

const handleAddTodo = () => {
  props.addTodo(inputValue);
  setInput({ input: "" });
};

最终版本应如下所示：

function AddTodo(props) {
  const [inputValue, setInput] = useState('');

  const handleAddTodo = () => {
    props.addTodo(inputValue);
    setInput('');
  };

  return (
    <div>
      <input onChange={(e) => setInput(e.target.value)} value={inputValue} />
      <button className="add-todo" onClick={handleAddTodo}>
        Add Todo
      </button>
    </div>
  );
}

export default connect(null, { addTodo })(AddTodo);

如果您已经重构为功能组件，则应该使用Redux hooks和/或Redux-toolkit。

Answer 2

将功能组件代码替换为以下代码。。您在钩子中使用了状态更新语法，这就是您面临问题的原因。

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";

function AddTodo(props) {
  
  const [inputValue, setInput] = useState("");

  const updateInput = (input) => {
    setInput(input);
  };

  const handleAddTodo = () => {
    props.addTodo(inputValue);
    setInput("");
  };

  return (
    <div>
      <input onChange={(e) => updateInput(e.target.value)} value={input} />
      <button className="add-todo" onClick={handleAddTodo}>
        Add Todo
      </button>
    </div>
  );
}

export default connect(null, { addTodo })(AddTodo);

如何在React-Redux中将类组件更改为功能组件？

2 个答案: