Передача массива из useState в качестве реквизита

Question

В примере здесь . Я должен ползунки, и я перетащить их. Поскольку у меня есть два значения, я храню их в useState как массив. Затем при сохранении в виде массива ComponentsWithArrayAsProp1 не видит изменений в состоянии, поскольку это тот же массив и не выполняет повторную визуализацию.

Во втором примере я сохраняю значения как values.toString(), но это не хорошее решение.

Что такое хорошее решение для этого случая?

Answer 1

Затем при сохранении в виде массива ComponentsWithArrayAsProp1 не видит изменений в состоянии, поскольку это тот же массив и не выполняет повторную визуализацию.

вы правы, мы можем решить каждый раз создавая новый массив следующим образом,

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

, но я думаю, что что-то не так с response-slider. потому что вы подходите к установке массива, setValues1 (values) работает, когда мы нажимаем на разные точки slider1 , но это не работает, когда мы тащим это. здесь что-то не так?

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