如何配置控制输入与Redux的状态管理反应?

Question

我试图创建一个受控的输入文本字段，其值最终将用于使API请求。问题是在输入(意味着在文本输入中按下键)时，查询每次设置为1个字符，并且在实际输入中没有显示文本。

应用程序组件

import React from 'react';
import BookList from './BookList';
import { connect } from 'react-redux';
import { setQuery } from '../actions';
const App = (props) => {
return (
<div>
<input
type="text"
onChange={(e) => setQuery(e.target.value)}
value={props.query}
></input>
<BookList />
</div>
);
};
const mapStateToProps = (state) => {
return {
query: state.query,
};
};
export default connect(mapStateToProps, { setQuery })(App);

行动

export const setQuery = (query) => {
console.log(query);
return {
type: 'SET_QUERY',
payload: query,
};
};

齿轮

const queryReducer = (state = '', action) => {
switch (action.type) {
case 'SET_QUERY':
return `${state}${action.payload}`;
default:
return state;
}
};

export default combineReducers({
query: queryReducer,
});

Answer 1

您的onChange应该是onChange={(e) => props.setQuery(e.target.value)}-因此使用setQuery的调度绑定版本

请注意，虽然我们不建议使用connect类组件，但使用useSelector和useDispatch钩子代替:https://redux.js.org/style-guide/style-guide/#use-the-react-redux-hooks-api

总的来说，你在这里写的是一个非常旧的Redux风格，你可能已经遵循了过时的教程。现代Redux没有switch..case reducers, action_type，手写动作创建者或connect的使用。

有关最新教程，请关注官方教程:
https://redux.js.org/tutorials/essentials/part-1-overview-concepts