将useState的数组作为prop传递

Question

在示例中为here。我必须滑动并拖动它们。因为我有两个值，所以将它们作为数组存储在useState中。然后将ComponentsWithArrayAsProp1存储为数组，不会看到状态变化，因为它是同一数组并且不会重新呈现自身。

在第二个示例中，我将值存储为values.toString()，但这不是一个好的解决方案。

这种情况下有什么好的解决方案？

Answer 1

然后将ComponentsWithArrayAsProp1作为数组存储，看不到状态变化，因为它是同一数组，并且不会重新呈现自身。

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

function onChange1(values) {
    setValues1([...values]);
  }
但是我认为react-slider出问题了。因为您设置数组的方法，当我们单击slider1的不同点时，setValues1（values）有效。但是当我们拖动它时它就消失了。这里还有其他问题吗？

选项1：

正如您所说，ComponentsWithArrayAsProp1看不到更改，因为数组引用是相同的，因此不会重新呈现。但是您可以保存数组的副本，而不是数组本身。

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]} />
);

Answer 2

选项1：