时间戳

首页 > 解决方案 > 关于数据流的全局状态/结构的问题

reactjs - 关于数据流的全局状态/结构的问题

问题描述

假设我有大量的问题、答案和许多其他数据，所有这些数据都组织成一个对象中的 30 个问题，我希望它成为有关屏幕上呈现的文本、正确答案和其他所有数据的主要来源但最重要的是，在这种情况下，我希望它跟踪正确和错误的答案，以便稍后在测试结束时，用户可以看到他们得到正确或错误的答案列表。有点像这样：

{
    id: nanoid(),
    title: "Question One",
    correct:false,
    description: "Which is the odd one out?",
    answer:'C',
    category:'spatial',
    type:'MCphoto',
    word:false,
    questionPhoto:{
      id:nanoid(), value:'./photos/spatialOne.png'
    }, {
    id: nanoid(),
    title: "Question Two",
    correct:false,
    description: "Which is the even one out?",
    answer:'C',
    category:'spatial',
    type:'MCphoto',
    word:false,
    questionPhoto:{
      id:nanoid(), value:'./photos/spatialOne.png'
}

我正在用 React 进行一些基本的测试，我一直遇到的主要问题是这个数组被打乱了，问题是随机的，然后它们主要通过 Question 组件呈现在屏幕上。换句话说，通过道具和道具钻孔等从父母传给孩子的信息应该包括对正确或错误回答的记录。在通过 MAJOR 道具钻孔（变得混乱）传递了几次之后，我在获取要记录和存储的正确和错误问题列表然后可供父组件使用而不仅仅是子组件时遇到问题。我的测试结束时的组件将被称为 a 但问题是在结构上该组件是从 App 组件呈现的，因此无法访问“ 在问题组件中已更改/更新。（请参阅应用程序/组件结构的评论底部）显示最终分数、对与错等的细分组件......不是问题组件的子组件。我知道这通常是使用全局状态的时候，但我该怎么做呢？当您在将数据从孩子传递给父母时遇到问题时，您是否认为全局状态是最好的方法？虽然我想要这个特别编码问题的答案，我会向你展示更多代码......我也想知道人们使用 redux 的方法是什么，何时使用它，以及为什么我在访问我的项目中的数据时一直遇到问题. 我正在阅读有关 redux 的内容 在个人项目中使用它真的很常见但是当我阅读上下文时它说你可以避免道具钻但是数据仍然只能从父母传递给孩子，基本上不能解决我的问题......我的组件显示分数分解并列出正确或错误回答的问题不是问题/测试组件的子项，因此它无法访问正确和错误分数的记录等。这是我项目中的结构性问题吗？是否应该从 App 组件或更高级别的组件向下传递所有数据，以便每个组件子组件都可以使用它？对我来说，这似乎会使 App.js 文件（或任何更高级别的组件）变得杂乱无章，有很多钩子、道具钻孔等。我该如何避免这种情况？我正在尝试编写一个类似这样的动作创建器：

export const correctScore=(isCorrect, questions)=>{
  return {
    type:'IS_CORRECT',
    payload:{
      isCorrect:isCorrect,
question:question
  }
}
}

在这里，我正在创建一个动作创建者，如果此人得到正确答案，则将 iscorrect 值设置为 true，从而更改我帖子开头显示的巨大问题文件。它采用的第二个参数是问题本身，因此在全球范围内，测试可以跟踪哪个问题的回答正确或错误

然后是这样的减速器：

const INITIAL_STATE={
  isCorrect:null,
question:null
};

export const correctReducer=(state=INITIAL_STATE, action)=>{
  switch (action.type){
    case "IS_CORRECT":
    return {...state, isCorrect:action.payload.isCorrect, question:action.payload.question}

    default:
    return state
  }
}

在我的项目测试部分的项目中，我有一些处理这种状态的逻辑（显然我将它连接到 mapstate 到 props 等以使其可用，但它似乎仍然给我带来了问题......这是测试部分项目。基本上是通过 setScore reducer 更改状态的地方。但是在更改之后（并且它甚至似乎没有正确地更改它）

if(props.finalAnswer===props.questions.answer){
        props.correctScore(true, props.question) ****here i am passing true in to the action create and then the current question ****
        console.log(props)
        props.setScore(props.score+9)
        props.handleNextClick()
        reset()
      }

我想我的问题是你认为 redux 是这个项目的最佳方法吗？此时代码超过 2k 行。而且我经常遇到这些情况，我无法将道具或数据片段传递回 App.js 文件中呈现的组件。

下面是 App 组件，因此您可以看到项目的结构。ParentComponent 本质上是应用程序的登录页面。您按下该页面上的按钮以“开始测试”，它会将您引导至问题组件。问题部分是所有数据的开始。它获取数据，使用相当少的钩子对数据进行处理。我将向您展示我的问题组件（或至少管理问题对象的逻辑等）。

这是问题组件。接收所有数据的地方。请注意，故障组件正在 App 组件中呈现，因此它无法使用挂钩 BC 接收任何数据、状态或状态操作，故障组件不是问题组件的子组件：

import React, {useState, useEffect} from 'react'
import Answers from './Answers'
import Range from './Range'
import QFIB from './QFIB'
import AFIB from './AFIB'
import './Question.css'
import {BrowserRouter as Router, Switch, Link, Route } from 'react-router-dom'
import {test, tester} from './utils/shuffler'

const qAndA=[{

}]

const Question =({score, setScore})=>{
  const [question, setQuestion]=useState('')
  const [questions, setQuestions]=useState(test)
  const [qIndex, setQIndex]=useState(0)
  const [answer, setAnswer]=useState('')
  const [id, setId]=useState('')
  const myRef=React.createRef()
  const [percentage, setPercentage]=useState(0)

useEffect(()=>{
  window.scrollTo(0, 0);

},[qIndex])

  const [random, setRandom]=useState(null)


  const handleAnswerChange=e=>{
    const currentQuestion=questions[qIndex]

    const answeredQuestion={
      ...currentQuestion,
      finalAnswer:e.target.value
    }
    const newQuestions=[...questions]
    newQuestions.splice(qIndex, 1, answeredQuestion);
    setQuestions(newQuestions);
  }
  let content=''
  const handleBackClick = () => setQIndex((i) => (i > 0 ? i - 1 : 0));
  const handleNextClick = () =>{
    setPercentage(percentage+(100/29))
    setQIndex((i) => (i < questions.length - 1 ? i + 1 : i));
  }



  const scoring=e=>{
    e.preventDefault()
  }

  const questionsAndAnswers=qAndA.map(questions=>{
    return {question:questions.question, id:questions.id, answer:questions.answer}
  })

标签： reactjsreduxreact-redux

解决方案

export const correctScore=(isCorrect, questions)=>{
  return {
    type:'IS_CORRECT',
    payload:{
      isCorrect:isCorrect,
  }
}
}

在这里，您没有将问题传递给有效负载。我通常对单独的有效负载进行单独的操作。

推荐阅读