Как использовать состояние массива в компоненте функции React?

Question

Я пытаюсь использовать состояние массива для функционального компонента React.

Это код, который я пробовал.

  const inputLabel = Array(5).fill(React.useRef(null));
  const [labelWidth, setLabelWidth] = React.useState(0);

  React.useEffect(() => {
    inputLabel.map((label, i) => {
      setLabelWidth({...labelWidth, [i]: label.current.offsetWidth});
    });
  }, []);

Это то, что я пытался, но показывает ошибкуReact Hook React.useEffect has missing dependencies: 'inputLabel' and 'labelWidth'

Требуется помощь экспертов React. Спасибо!

Answer 1

ошибка, которую вы упомянули, может быть исправлена ​​несколькими способами - Как исправить предупреждение об отсутствующей зависимости при использовании useEffect React Hook?

, но в любом случае это не должно сломать ваше приложение, просто чтобы предупредить вас.

в любом случае, похоже, что setLabelWidth вызывается из эффекта, устанавливающего LabelWidth как объект, а не как массив.

для подведения итогов, вам не нужноВ этом случае вообще используйте hooks, вы можете просто использовать метод массива {.push ()} js в lop

---

for(let i = 0; i < InputLabel.length ; i++) {
    LabelWidth.push(InputLabel[i])
  }

---

, но если вы все еще хотите сделать это с помощью hooks и избегатьошибки я предлагаю что-то подобное

---

   const [labelWidth, setLabelWidth] = React.useState([]);

   React.useEffect(() => {
    if (labelWidth.length === 0) {
     const inputLabel = Array(5).fill(React.useRef(null));
     inputLabel.map((label) => {
     setLabelWidth([ ...labelWidth, label.current.offsetWidth ]);
     }
    });
   }, [labelWidth, setLabelWidth]);

---