在输入更改事件上使用分派会导致重新复制整个页面- Redux工具包
在输入更改事件上使用分派会导致重新复制整个页面- Redux工具包
提问于 2022-03-16 14:28:02
我是新来的反应和Redux，我有这个问题：
我正在使用Redux工具包。我已经对无线电输入进行了样式化，当对一个输入进行检查时，它必须用它的值更改一个全局状态，但是当全局状态发生变化时，它不能被重新命名，因为在rerender上，它破坏了样式(CSS :checked选择器工作不当)。只有使用这种状态的元素才必须改变，即。按钮。当全局状态发生变化时，如何防止它们重新生成？我做错了什么？提前谢谢。
const dispatch = useDispatch()
const { regType } = useSelector((state) => state.regTypes)
const handleChange = (e) => {
dispatch(changeRegType(e.target.value))
}
return (
<form>
<StyledRadio name="registrationType" id="private" value="private" onChange={handleChange} >
<StyledRadio name="registrationType" id="company" value="company" onChange={handleChange} />
<Button type="submit" disabled={!!regType ? true : false}>Next</Button>
</form>
)切片
export const registrationTypesSlice = createSlice({
name: "registrationType",
initialState: {
regType: "",
},
reducers: {
changeRegType: (state, action) => {
state.regType = action.payload
},
},
})
export const { changeRegType } = registrationTypesSlice.actions
export default registrationTypesSlice.reducer回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-16 20:18:02
简短的回答:您需要使用React.memo临时包装您的StyledRadio组件。并且，使用useCallback钩子创建handleChange事件处理程序的回忆录版本。
很长的答案，参见下面的代码：
index.tsx
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { StyledRadio } from './StyledRadio';
const changeRegType = (v) => ({ type: 'CHANGE_REG_TYPE', payload: v });
export function Comp() {
const dispatch = useDispatch();
const { regType } = useSelector((state: any) => state.regTypes);
console.log('regType: ', regType);
const handleChange = useCallback(
(e) => {
const { value } = e.target;
dispatch(changeRegType(value));
},
[dispatch],
);
return (
<form>
<StyledRadio name="registrationType" data-testid="private" id="private" value="private" onChange={handleChange} />
<StyledRadio name="registrationType" data-testid="company" id="company" value="company" onChange={handleChange} />
<button type="submit" disabled={!!regType ? true : false}>
Next
</button>
</form>
);
}StyledRadio.tsx
import React from 'react';
export const StyledRadio = React.memo((props: React.ComponentPropsWithoutRef<'input'>) => {
console.count('StyledRadio render');
return <input {...props} type="radio" />;
});index.test.tsx
import { configureStore } from '@reduxjs/toolkit';
import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import { Comp } from './';
const store = configureStore({
reducer: (state = { regTypes: { regType: '' } }, action) => {
switch (action.type) {
case 'CHANGE_REG_TYPE':
return { ...state, regTypes: { regType: action.payload } };
default:
return state;
}
},
});
describe('71504950', () => {
test('should pass', () => {
render(
<Provider store={store}>
<Comp />
</Provider>,
);
fireEvent.click(screen.getByTestId('private'), { target: { value: 'private' } });
});
});测试结果：
PASS redux-toolkit-example packages/redux-toolkit-example/stackoverflow/71504950/index.test.tsx
71504950
✓ should pass (56 ms)
console.log
regType:
at Comp (packages/redux-toolkit-example/stackoverflow/71504950/index.tsx:10:11)
console.count
StyledRadio render: 1
at packages/redux-toolkit-example/stackoverflow/71504950/StyledRadio.tsx:4:11
console.count
StyledRadio render: 2
at packages/redux-toolkit-example/stackoverflow/71504950/StyledRadio.tsx:4:11
console.log
regType: private
at Comp (packages/redux-toolkit-example/stackoverflow/71504950/index.tsx:10:11)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.303 s如您所见，当Comp组件第一次呈现日志时：
// first render
regType:
StyledRadio render: 1
StyledRadio render: 2
// second render
regType: private触发无线电更改事件后，通过state操作更改CHANGE_REG_TYPE。Comp将重新呈现，此时，StyledRadio的道具与上一次呈现相同，因此React.memo将跳过组件的重呈现。
如果删除useCallback或React.memo，您将得到以下日志：
// first render
regType:
StyledRadio render: 1
StyledRadio render: 2
// second render
regType: private
StyledRadio render: 3
StyledRadio render: 4页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71504950
复制相关文章
![fatal error: boost/algorithm/string.hpp: 没有那个文件或目录 [#c++,VM,linux]](https://ask.qcloudimg.com/http-save/yehe-9692080/3e24593bb770347ef920a37c9bf0b169.png)
相似问题
SQLSTATE[HY000] [2002]没有这样的文件或目录
SQLSTATE[HY000] [2002]没有这样的文件或目录
错误: SQLSTATE[HY000] [2002]没有这样的文件或目录
Laravel : SQLSTATE[HY000] [2002]没有这样的文件或目录
PDOException: SQLSTATE[HY000] [2002]没有这样的文件或目录
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
