从Redux调用的对象多次重新渲染,并变为未定义。请帮帮我
我正在使用React和Redux制作一个打字大师工具。
“""“”当文本输入框中输入错误时,将调用该函数“""”
为此,我创建了如下三个切片:
- Test-text --输出测试文本
- Input-text --读取输入文本
1.结果-具有三个参数{准确度、WPM和WPMaverage }的对象
当我从对象中获取精度时,它重新渲染了4次,并且没有定义,请帮助
1.一百
1.九九
1.九九
1.未定义的
1.南
enter image description here
请看看我的代码,让我知道为什么会这样
分享我的github链接:-https://github.com/vishwaTj/Typing_Master
我尝试了很多东西,但我认为这是由于使用效果。用于匹配输入字符串的重新渲染导致多个状态提取,我不确定。
结果切片编码:
import {createSlice} from "@reduxjs/toolkit"
const ResultSlice = createSlice({
name:"Result",
//REmember the { gap for curly brace "Oh my god"
initialState: {
Accuracy:100,
WPM:40,
WPMAverage:[]
},
reducers:{
setAccuracy(state,action){
return state.Accuracy-1;
}
}
})
export const ResultReducer = ResultSlice.reducer;
export const {setAccuracy} = ResultSlice.actions;
'''
code of slice for Input text
'''
import { createSlice } from "@reduxjs/toolkit";
const InputTextSlice = createSlice({
name:"InputText",
initialState:[],
reducers:{
setValue(State,action){
return action.payload;
}
}
})
export const InputTextReducer = InputTextSlice.reducer;
export const {setValue} = InputTextSlice.actions;
存储索引文件的代码
import { configureStore } from "@reduxjs/toolkit";
import {TestTextReducer} from './slices/TestText';
import { InputTextReducer } from "./slices/InputText";
import { ResultReducer } from "./slices/Result";
import { setTest} from "./slices/TestText";
import { setValue } from "./slices/InputText";
import { setAccuracy } from "./slices/Result";
const store = configureStore({
reducer:{
TestText:TestTextReducer,
InputText:InputTextReducer,
Result:ResultReducer
}
});
export {store, setTest, setValue, setAccuracy};
从redux呈现状态的组件代码
import React, { useEffect } from 'react';
import { useDispatch,useSelector } from 'react-redux';
import { setValue,setAccuracy } from '../store';
const TextBox = () => {
const Test = useSelector((state)=>{
return state.TestText;
})
const InputText = useSelector((state)=>{
return state.InputText;
})
const Accuracy = useSelector((state)=>{
console.log(state.Result);
return state.Result.Accuracy;
})
const dispatch = useDispatch();
const handleChange=(e)=>{
dispatch(setValue(e.target.value));
}
useEffect(()=>{
handleMatch();
// eslint-disable-next-line react-hooks/exhaustive-deps
},[handleChange])
function handleMatch(){
if(Test === InputText){
console.log( "a cmoplete match");
dispatch(setValue(""));
return;
}
if(Test.includes(InputText)){
console.log("good going");
return;
}
else{
console.log(Accuracy);
dispatch(setAccuracy());
return;
}
}
return (
<div className='TextBox'>
<h2>Lesson 1</h2>
<input
type="text"
className='text-input'
value={Test}
style={{backgroundColor:"rgba(55,90,127,255)"}}/>
<input
type="Text"
className='text-input user'
onChange={handleChange}
value={InputText}
/>
<div className='performance'>
<h4 className='Tags'>WPM:</h4>
<h4 className='Tags'>Accuracy:</h4>
<h4 className='Tags'>Average WPM:</h4>
</div>
</div>
)
}
export default TextBox;
1条答案
按热度按时间sr4lhrrt1#
基于
TextBox.js:16
上的控制台日志,它似乎正在记录所选的state.Result
状态,即 * 在某个地方 * 状态从对象突变为数字。一旦发生这种情况,并调用了一个额外的dispatch(setAccuracy());
,setAccuracy
reducer示例试图从一个数字的未定义属性中减去1。对非数字的数学运算在最坏的情况下会产生异常,在最好的情况下会产生NaN
。setAccuracy
reducer函数只返回state.Accuracy - 1
。Redux-Toolkit reducer函数应该改变草稿状态***或***返回下一个状态...全部示例:
或
第二种方法也可以,但第一种方法是首选,因为RTK在后台实现了immer.js,并允许您编写简洁,可变的状态更新。换句话说,它允许您编写更少的代码,更干净,更易于阅读和维护。参见Writing Reducers with Immer。