Question

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

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

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

Answer 1

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

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

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

但是我认为react-slider出了点问题。因为您设置数组的方法，当我们单击slider1的不同点时，setValues1（values）可以工作。但是当我们拖动它时它就消失了。这里还有其他问题吗？

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

从useState传递数组作为prop

2 个答案:

选项1：

选项2：