我使用Reaction上下文来处理我的应用程序中的一些全局状态.目前的设计可能有点差,但不知何故,它确实发挥了作用,至少有时是这样的.

我的问题是,在使用setX()时,一些上下文没有正确更新.这有点奇怪,但是一些上下文被正确地更新了,而另一些则被更新了,但只有在"使用它两次"时才会更新.->按下我的按钮两次.

以下是一些样例代码--我得到了我的上下文:

const { actualBatch, setActualBatch } = useContext(ActualBatch)
const { resultBatch, setResultBatch } = useContext(ResultBatch)
const { trainingStatus, setTrainingStatus } = useContext(TrainingStatus)

这是在我的"handelButtonClick"函数的SwitchCase中,稍后我将拆分以下内容:

测试用例:

case "test":
                setActualBatch(unChunkingBatch(actualBatch))
                setActualBatch(actualBatch.pop())

                setIsLearningRunning(false);

                setTrainingStatus("Test")

                break;

开始病例:

const handleButtonClick = (action) => {

        switch (action) {
            case "start":

                setIsLearningRunning(false)

                setTimeInSeconds(-3)

                setBatchSize(22)
                setChunkSize(5)

                setActualBatch(getRandomNumbersForTraining(batchSize,ChunkSize))


                setActualChunkIndex(0);

                setIsLearningRunning(true);

                setTrainingStatus("Train")

                break;

因此,问题是,例如,正确设置了"TrainingStatus"(上下文),因为我的图形用户界面呈现的内容应该如下所示:

 return (
        <div className="max-h-5/6 w-full h-5/6 bg-gradient-to-tr from-cyan-500 to-cyan-900 rounded-2xl m-4 text-center  flex items-center justify-center">

            {trainingStatus === "DefaultMessage" && <strong className={"text-white text-4xl"}>Press button to start.</strong>}

            {trainingStatus === "Train" && <MnemoTrain/>}
            {trainingStatus === "Pause" && <p className={"text-center text-white text-4xl"}>PAUSE...</p>}
            {trainingStatus === "Test" && <MnemoTest />}
            {trainingStatus === "Result" && <MnemoResult/>}

        </div>
    );

组件显示正确,因此我认为此状态已设置.

但我对其他州也有意见.例如,我在按下Start按钮时设置了chunkSize和BatchSize.但在图形用户界面中,我需要按两次按钮,然后设置状态.当第一次按下按钮时,将使用缺省值...

所以我的问题是:这些州的行为有点奇怪.这是不是因为不同步的"心流"?还是我以错误的方式使用了上下文? 你的短信 这是我的拆分方法/包装器:

export function unChunkingBatch(batch) {
    return batch.flat();
}

谢谢你的帮助.我很感激

我try 了几种不同的状态/价值观.我try 了保存在州中的数组,并try 了不同的实现.

推荐答案

try 使用这样的设置状态函数

 setIsLearningRunning(() => false);
 setTrainingStatus(() => "Test")

在Reaction中,当从一个函数更新多个状态时,会发生一些奇怪的行为,您可以从该链接中看到这些行为,如果您首先看到该链接并了解状态在这种情况下的工作原理,然后再进行解决方案,可能会更好

就我个人而言,如果您有如此多的状态要管理关于useReducer的文档,我建议使用useReducer

Reactjs相关问答推荐

CSS转换不适用于React MUI对象

如何等待我的插入内容提交后再继续执行指令?

在Reaction中导入';图片&文件夹时出错

ReactJS:唯一项目的数量总和

Syncfusion:带有 TabItemsDirective 的选项卡组件不显示任何内容

i18next中复数键的理解

如何渲染子路径并触发react 路由父加载器?

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

卸载 React 组件时未清除本地存储项目

如何让 useEffect 在 React.JS 中只运行一次?

图像路径很奇怪,部署 Next.js 应用程序后我看不到任何图像

使用 toast 时挂钩调用无效

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

状态链接未传递到路由页面

如何在不重新加载页面的情况下加载新添加的数据?

React:如何设置光标 Select

react 事件顺序

React如何在用户登录后等待当前用户数据被获取

为什么这两个 div 的渲染方式不同?

React Router 6,一次处理多个搜索参数