从 useState 传递数组作为属性

Question

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

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

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

Answer 1

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

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

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

但我认为 react-slider 有问题，因为当我们单击滑块 1 的不同点时，您设置数组 ，setValues1(值(的方法有效。 但是当我们拖动它时，它不起作用。 这里还有其他问题吗？

Answer 2

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