Reactjs 将数组作为道具从useState传递

在这个例子中。我必须使用滑块并拖动它们。因为我有两个值，所以我将它们作为数组存储在useState中。 然后将

组件SwithArrayasProp1

存储为数组时，不会看到状态的变化，因为它是同一个数组，不会重新渲染自身

在第二个示例中，我将值存储为

values.toString（）

，但这不是一个好的解决方案

对于这种情况，什么是好的解决方案？

选项1： 正如您所说的，

组件switharrayasprop1

没有看到更改，因为数组引用是相同的，所以它不会重新渲染。但您可以保存数组的副本，而不是数组本身

function onChange1(values) {
  setValues1(values.slice());

  // Another way to do this
  // setValues1([...values]);
}

备选案文2： 您还可以单独保存阵列号，如下所示：

const [values1Start, setValues1Start] = useState(0);
const [values1End, setValues1End] = useState(0);

function onChange1(values) {
  setValues1Start(values[0]);
  setValues1End(values[1]);
}

return (
  <ComponentsWithArrayAsProp1 values={[values1Start, values1End]} />
);

const[values1Start，setValues1Start]=useState（0）；
const[values1End，setValues1End]=使用状态（0）；
函数onChange1（值）{
设置值1开始（值[0]）；
设置值1end（值[1]）；
}
返回(
);

然后将组件SwithArrayasProp1存储为数组，不会看到状态的变化，因为它是同一个数组，不会重新呈现自身

你是对的，我们可以通过每次创建新数组来解决它，如下所示

function onChange1(values) {
    setValues1([...values]);
  }

但我认为react slider有点问题，因为你设置数组的方法，当我们点击slider1的不同点时，setValues1（值）会起作用。但是当我们拖它的时候它就不起作用了。这里还有什么不对劲吗