useSelector钩子调用无效

Question

我试图在我的待办事项列表中添加我的待办事项，但当我在栏上写一些东西并单击添加按钮时，我得到这个错误:

错误:无效钩子调用。钩子只能在函数体内部调用函数分量的。这可能发生在以下情况之一原因:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本

下面是错误代码:

2 | import { useSelector } from "react-redux";
3 | 
4 | const TodoList = () => {
> 5 |   const list = useSelector((state) => state.todoList);
6 |   return (
7 |     <div>
8 |       <ul>

，这里是我的一些文件:

AddTodo.jsx

import React, { useState } from "react";
import { addTodo } from "../redux/actions";
import { useDispatch } from "react-redux";
import TodoList from "./TodoList";
import { SetValueInput } from "../redux/actions";
function AddTodo() {
const [input, setInput] = useState("");
const dispatch = useDispatch();
const inputHandler = (text) => {
setInput(text);
dispatch(SetValueInput(text));
};
// I didn't use this yet.
const addHandler = () => { 
dispatch(addTodo(input));
};
return (
<div>
<input
type="text"
input={input}
onChange={(event) => inputHandler(event.target.value)}
placeholder="Enter here..."
/>
<button
type= "submit"
onClick={TodoList}>Add
</button>
</div>
);
}
export default AddTodo;

TodoList.jsx

import React from "react";
import { useSelector } from "react-redux";
const TodoList = () => {
const list = useSelector((state) => state.todoList);
return (
<div>
<ul>
{list.map((todo) => (
<ul key={todo.id}>{todo.text}</ul>
))}
</ul>
</div>
);
};
export default TodoList;

actions.js

export const ADD_TODO = "ADD_TODO";
export const SET_VALUE = "SET_VALUE"
let nextTodo = 0;
export const addTodo = text => ({
type: "ADD_TODO",
text
})
export const SetValueInput = (t) => async (dispatch) => {
try {
dispatch({
type: SET_VALUE,
id:nextTodo++,
text: [t]
})
} catch (error) {
console.log(error.message)
}
}

reducers.js

import {
SET_VALUE
} from "./actions";
import {
ADD_TODO
} from "./actions"
let initial_state = [{
text: ""
}]
export const TodoReducer = (state = initial_state, action) => {
switch (action.type) {
case ADD_TODO:
return [{
text: action.text,
}]
default:
return state;
}
}
export const TodoListReducer = (state = initial_state, action) => {
switch (action.type) {
case SET_VALUE:
return [{
...state,
id: action.id,
text: action.text
}]
default:
return state;
}
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { TodoReducer,TodoListReducer } from "./redux/reducers";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
const rootReducer = combineReducers({
todoList: TodoListReducer,
todos: TodoReducer
});
const middleware = [thunk];
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();

App.js

import "./App.css";
import AddTodo from "./components/AddTodo";
function App() {
return (
<div>
TODO LIST
<AddTodo />
</div>
);
}
export default App;

Answer 1

<button
type= "submit"
onClick={TodoList}>Add
</button>

您在这里使用TodoList作为回调函数。它是一个组件，你只能像<TodoList />那样渲染它