首页 > 解决方案 > 向前传递值时的React-Redux Slider未定义值

问题描述

这是我的第一篇文章,如果我做错了,我很抱歉。因此,我开始使用 React 和 Redux 为我的投资组合创建一个网页,但我遇到了无法找到解决方案或逻辑缺陷的地步。该页面是用户可以选择一个技能然后指向他知道的值的指针。我可以将技能保存到 localStorage,但我无法通过滑块传递技能值来保存它。如果有人可以提供有关我做错的任何提示或信息的帮助,请提供帮助。

这是一些组件:

  1. 滑块组件
  2. 滑块通过时的技能计算
  3. listSkills Comp 其中通过了 SkillComp 和 Slider
  4. 还原动作
  5. redux 减速器
  6. 这是控制台输出:控制台

标签: javascriptreactjsreduxecmascript-6react-redux

解决方案


问题:未调度操作

我看到的问题在SkillSliderBar组件的图像#1 中。可能还有其他问题,我还没有进一步研究这个。

首先,您的解构道具缺少addSkillValue.mapDispatchToProps

您定义了一个函数handleChange来调用该addSkillValue函数,但您从不调用 handleChange。相反,您正在调用changeValuewhich 更新本地组件状态。

您可能根本不需要本地状态。您可以使用skillValuefrommapStateToProps作为value输入。要设置值,请addSkillValue从调用mapDispatchToProps

确保首先使用value而不是eventonChange调用您输入的函数。如果它与事件一起被调用,那么您将如下所示:handleChange

const handleChange = e => {
  addSkillValue(e.target.value);
}

建议:状态形状

看起来你在你的状态下只有当前技能的技能值。可能您想要的是存储具有属性的技能对象数组namevalue. 或者可能是一个键值对象,其中键是技能名称,值是技能值。我不确定你是否需要. currentSkillName您可以通过调度包含新值和要更新的技能名称的操作来更新任何技能的值。


推荐阅读