Javascript 反应/物料界面：如何修复<；滑块>；要使用自定义数据？

正在尝试使用材质UI滑块显示API数据！关键是，滑块是非交互式的，它只用于显示数据

我不断地发现这个错误：

Slider.js:91 Uncaught TypeError: nearest.toFixed is not a function
    at roundValueToStep (Slider.js:91)
    at getFingerNewValue (Slider.js:639)
    at Slider.js:788

我也不确定使用什么作为列表的键值

我在下面添加了一些代码来重现问题和数据。 代码沙盒：

这是我的原始代码：

    useEffect(() => {
        const fetchData = async () => {
          const response = await axiosInstance.get(URL + slug)
          const result = response.data;
          setData(result);  
        };
  
        fetchData();
      }, []);

    return (
        <>
        <Container>
        <Grid>
        <Paper>
            <List dense component="div" role="list">
            {
            data?.map(data =>
                <ListItem key={data} role="listitem">
                    <Slider valueLabelDisplay="auto" value={data.adj_close} min={data.week52low} max={data.week52high} aria-labelledby="continuous-slider" />            
                </ListItem>)       
            }
            </List> 
        </Paper>
        </Grid>
        </Container>

        </>
      );
}         

useffect（（）=>{
const fetchData=async（）=>{
const response=wait axiostation.get（URL+slug）
const result=response.data；
设置数据（结果）；
};
fetchData（）；
}, []);
返回(
{
数据？.map（数据=>
)       
}
);
}         

---

查看上面的错误，SliderAPI正在尝试对这些步骤进行取整？我深入研究了API:，但无法真正复制任何东西来帮助解决我的问题。如何使用这些滑块显示我的数据？

将您放入滑块（data.adj_close）的值、最小值、最大值转换为您可以通过这种方式写入的数字

 useEffect(() => {
        const fetchData = async () => {
          const response = await axiosInstance.get(URL + slug)
          const result = response.data;
          setData(result);  
        };
  
        fetchData();
      }, []);

    return (
        <>
        <Container>
        <Grid>
        <Paper>
            <List dense component="div" role="list">
            {
            data?.map(data =>
                <ListItem key={data} role="listitem">
                    <Slider valueLabelDisplay="auto" value={Number(data.adj_close)} min={Number(data.week52low)} max={Number(data.week52high)} aria-labelledby="continuous-slider" />            
                </ListItem>)       
            }
            </List> 
        </Paper>
        </Grid>
        </Container>

        </>
      );
}    

useffect（（）=>{
const fetchData=async（）=>{
const response=wait axiostation.get（URL+slug）
const result=response.data；
设置数据（结果）；
};
fetchData（）；
}, []);
返回(
{
数据？.map（数据=>
)       
}
);
}    

---

这将删除错误

，正如您在链接的文档中所看到的，滑块期望

min

、

max

和

值

为数字类型。你提供的是字符串。啊，我明白了，我怎样才能快速地将它们转换为浮点数？你有什么解决方案吗？@Arun，确保你的数据是数字格式的，而不是字符串。但是如果我也要8.1呢？