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

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(不是函数

这是原始代码在此处输入链接描述

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钩子和/或与Redux工具包配合使用。

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