Redux状态对象获得多个渲染并变得未定义

uz75evzq  于 2023-06-06  发布在  其他
关注(0)|答案(1)|浏览(130)

从Redux调用的对象多次重新渲染,并变为未定义。请帮帮我
我正在使用React和Redux制作一个打字大师工具。
“""“”当文本输入框中输入错误时,将调用该函数“""”
为此,我创建了如下三个切片:

  1. Test-text --输出测试文本
  2. 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;
sr4lhrrt

sr4lhrrt1#

基于TextBox.js:16上的控制台日志,它似乎正在记录所选的state.Result状态,即 * 在某个地方 * 状态从对象突变为数字。一旦发生这种情况,并调用了一个额外的dispatch(setAccuracy());setAccuracy reducer示例试图从一个数字的未定义属性中减去1。对非数字的数学运算在最坏的情况下会产生异常,在最好的情况下会产生NaN
setAccuracy reducer函数只返回state.Accuracy - 1。Redux-Toolkit reducer函数应该改变草稿状态***或***返回下一个状态...全部
示例:

const ResultSlice = createSlice({
  name: "Result",
  initialState: {
    Accuracy: 100,
    WPM: 40,
    WPMAverage: []
  },
  reducers: {
    setAccuracy(state) {
      state.Accuracy = state.Accuracy - 1;
    }
  }
});

const ResultSlice = createSlice({
  name: "Result",
  initialState: {
    Accuracy: 100,
    WPM: 40,
    WPMAverage: []
  },
  reducers: {
    setAccuracy(state) {
      return {
        ...state,
        Accuracy: state.Accuracy - 1;
      };
    }
  }
});

第二种方法也可以,但第一种方法是首选,因为RTK在后台实现了immer.js,并允许您编写简洁,可变的状态更新。换句话说,它允许您编写更少的代码,更干净,更易于阅读和维护。参见Writing Reducers with Immer

相关问题