ошибка при добавлении значения в массив state в react

Question

Я хочу условно добавить значение в массив. Это state и функция добавления:

const [Selectors, setSelectors] = useState([]);
const SelectorAdd = (newValue) => {
   setSelectors((array) => [...array, newValue]);
}

И я просто хочу добавить любое текстовое значение в массив Selectors внутри этого условия:

{Yes ?
   <>
      <AnyComponent />
      {SelectorAdd('text value')} <=== ТУТ
   </>
: null}

И получаю эту ошибку:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Подскажите, пожалуйста, в чем ошибка? Спасибо!

Answer 1

SelectorAdd() => setSelectors() => перересовка => заного по кругу бесконечно

const A = () => {
  const [state, setState] = useState(0);
  const [yes, setYes] = useState(true)

  // //не правилный способ
  // if (yes) {
  //   //запускает перересовку бесконечно
  //   setState((prev) => ++prev);
  // }

  //правильный
  useEffect(() => {
    if (yes) {
      setState((prev) => ++prev);
    }
  }, [yes]);

  //не имеет смысла внутри юзать setState
  return yes && <div>что то</div>;
};

БЛОГ НА HUSL

ошибка при добавлении значения в массив state в react

Ответы (1 шт):