更新反应材料 ui 滑块的状态/值不起作用

Question

我显示了 10 个滑块，它们从组件状态中的数据“映射”到我的 jsx 中。

我可以让所有滑块使用标题、值、输入等进行渲染，但我无法从滑块或输入更新值。

您可以从我创建的 onChange 处理程序中看到，我尝试了几种不同的方法（至少比本示例中的多 3/4），但它们都不起作用。它们都导致组件损坏。

export const PlacementsForm = () => {
  const [placementData, setPlacementData] = useState([
    { key: 1, name: 'Long side panel', value: 10 },
    { key: 2, name: 'Custom wrap', value: 0 },
    { key: 3, name: 'Seatback', value: 0 },
    { key: 4, name: 'Full wrap', value: 20 },
    { key: 5, name: 'Driver’s cabin', value: 0 },
    { key: 6, name: 'Stop side panel', value: 0 },
    { key: 7, name: 'Max Parade', value: 60 },
    { key: 8, name: 'Parade', value: 0 },
    { key: 9, name: 'Full rear', value: 70 },
    { key: 10, name: 'Rear panel', value: 0 },
  ]);

  const handleSliderChange = (event) => {
    setPlacementData({
      ...placementData,
      [event.target.name]: event.target.value,
    });
  };

  const handleInputChange = (event, idx) => {
    const usedSlider = event.target;
    setPlacementData(() => placementData.map((item, i) => usedSlider.value));
  };

  //   const handleInputChange = (event) => {
  //     setPlacementData(
  //       event.target.value === '' ? '' : Number(event.target.value)
  //     );
  //   };

  //   const handleSliderChange = (name) => (event) => {
  //     // placementData[index] = event.target.value;
  //     // setPlacementData([...placementData]);
  //     setPlacementData({ [name]: event.target.value });
  //   };

  //   const handleInputChange = (name) => (event, value) => {
  //     // placementData[index].value = event.target.value;
  //     // setPlacementData([...placementData]);
  //     setPlacementData({ [name]: value });
  //   };

  console.log('placementData', placementData);

  return (
    <SliderContainer>
      <Grid>
        <Row>
          {placementData.map((option) => (
            <Col xs={6} md={6} key={option.name}>
              <SliderTitle>{option.name}</SliderTitle>
              <SliderItem key={option.key}>
                <MatGrid item xs>
                  <Slider
                    value={typeof option.value === 'number' ? option.value : 0}
                    onChange={handleSliderChange}
                    aria-labelledby="input-slider"
                    valueLabelDisplay="auto"
                  />
                </MatGrid>
                <MatGrid item>
                  <Input
                    name={option.name}
                    style={{ width: '50px', paddingLeft: 15 }}
                    value={option.value}
                    margin="dense"
                    onChange={handleInputChange}
                    // onBlur={handleBlur}
                    inputProps={{
                      step: 10,
                      min: 0,
                      max: 100,
                      type: 'number',
                      'aria-labelledby': 'input-slider',
                    }}
                  />
                </MatGrid>
              </SliderItem>
            </Col>
          ))}
        </Row>
      </Grid>
    </SliderContainer>
  );
};

我一尝试移动滑块或使用输入，就会收到此错误。

我还能尝试什么？

Answer 1

当您使用对象更新数组时，您应该使用之前在 useState 挂钩中定义的字段（“key”、“name”和“value”）。

如果这个回答有帮助，请标记它。谢谢！