我需要一些帮助来了解在JSON数据中执行OnChange和Map到Range Slider的正确位置。组件呈现良好，但移动滑块时出现以下错误：
- 未处理的运行时错误TypeError：无法读取未定义的属性（阅读'value'）*
**更新：**CodeSanbox供参考，如果有一种方法可以在数字上方有一个工具提示，这也会很方便。Codesandbox
代码如下：
<RangeSlider
colorScheme="red"
onChange={(e) => {
setFilter({
...filter,
search: e.target.value,
});
}}
aria-label={["min", "max"]}
onChangeEnd={(val) => console.log(val)}
defaultValue={[50, 100]}
min={0}
max={100000000000}
step={10}
{...info.map((item) => (
<option value={item.price}>{item.price}</option>
))}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<RangeSliderThumb index={0} />
<RangeSliderThumb index={1} />
</RangeSlider>
1条答案
按热度按时间gwbalxhn1#
更新
根据实际项目，过滤的逻辑似乎与
RangeSlider的使用不匹配。这是一个比RangeSlider案例更大的主题，但我有以下建议：RangeSlider将提供一个2个数字的数组，但当前的过滤器逻辑似乎基于（search？）字符串。您可能需要重写它，以便它过滤选定范围（2个数字之间）之外的任何项目。你可以从重命名
filter对象开始，比如filterList，给予它一些键，比如name，priceRange。我还建议在处理过滤器之前，首先构建可视的项目卡，以便显示，这样当您弄清楚逻辑时，就可以轻松地使用它们进行测试。
配置范围滑块
e.target.value不会在此处捕获值，因为对于此组件，onChange会向回调函数提供一个number[]数字数组。根据脉轮UI文档，在这种情况下，您可能希望使用
onChangeEnd来获得范围滑块的最终值，而不是onChange，后者会触发大量更新。请尝试以下示例，看看它是否能解决错误：
我删除了下面的代码，因为语法有错误，它不适合组件。如果这是需要Map的JSON数据，我建议在单独的组件中执行此操作，并将Ranger滑块保留为单一用途。