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>

        </>
      );
}    

這將消除錯誤