Блог

У меня есть компонент функции react, который устанавливает массив идентификаторов на основе события пользователя при щелчке по ссылке(который открывает всплывающее окно с некоторыми параметрами, которые можно выбрать, и имеет обратный вызов после его закрытия, который вернет идентификатор выбранного элемента). эти идентификаторы передаются дочернему компоненту, у которого есть пользовательский крючок, который использует эти идентификаторы для выполнения некоторых действий. всякий раз, когда я нажимаю на ссылку, выбираю элемент и закрываю всплывающее окно.. появляется ошибка

«VM10715 react_devtools_backend.js:2430 Вы изменили параметр при вызове крючка, который должен оставаться неизменным [Массив(2)] 0: (2) [«», «asdsadsad»] Последнее значение: (…) Последнее значение: (…) длина: 1″

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

 const TestComp = () => {
  const [newIds, setNewIds] = useState([]);

  const onPopupElementSelect = (ids) => {
    setNewIds([...newIds, ids]);
  };

  return (
    //renders some components
    <>
      <ImageComponent images={images} ids={newIds} onClick={handleClick} />

      <Popup onSelect={onPopupElementSelect} />
    </>
  );
};

const ImageComponent = (props) => {
  const { newIds, images } = props;
  const newImages = useImages(ids || ['']); //customhook that fetches image details by ids

  const imgs = images.map((i) => (
    <div key={i.imageId}>
      <img src={i.imageUrl} alt="" />
      <Link onClick={handleClick} /> //opens the popup for user to select a new
      image
    </div>
  ));

  return <div>{imgs}</div>;
};
 

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

Я думаю, это потому, что вы дали одно и то же имя parameter , и состояние может быть использовано newID в качестве имени параметра

 const onPopupElementSelect = (newId) => {
    setIds(oldIds => [...oldIds, newId]);
};