React/Material-UI：如何修复<slider>使用自定义数据？</slider>

Question

试图让用户 Material-UI slider 显示 API 数据，他们的关键是，Z10BF08F0BBD668BD9475BE65B4AE4 它仅用于显示数据。

我不断收到此错误：

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>

        </>
      );
}         

看上面的错误，slider API 是在尝试绕行步骤？ 我深入研究了 API: https://material-ui.com/api/slider/ ，但无法真正重现任何东西来帮助解决我的问题。 如何使用这些滑块显示我的数据？

Answer 1

将您放入 slider(data.adj_close) 中的 value,min,max 道具转换为可以通过以这种方式编写来实现的数字

 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>

        </>
      );
}    

这将消除错误