Почему не работает useState?

Question

[Виктор]

Есть такой код:

const listPhoneState = useSelector((state) => state.phoneListReducer.phoneList)
  const [serchList, setSearchList] = useState([...listPhoneState])

Вопрос почему в serchList при первой загрузке не попадают данные от стейта редакса на выходе пустой массив, при размонтировании элемента а потом его повторном монтировании все ок данные приходят. И как это поправить?

Answer 1

[Антон Спирин]

Какой смысл писать состояние из store в состояние компонента? Используйте состояние из store напрямую.
Оптимальней всего, в данном случае, где-то хранить состояние фильтра и фильтровать данные из store налету.

const phoneList = useSelector((state) => state.phoneListReducer.phoneList);
const [search, setSearch] = useState('');
const filteredPhoneList = useMemo(
  () => phoneList.filter(phone => phone.includes(search)),
  [search],
);

Comments

[Виктор]

Мне надо было сделать фильтрацию по поиску. Для этого я хотел создать локальное состояние принимающее в себя копию store. Сам store я не могу менять, так как если я очищаю поиск, весь массив данных должен выводиться.

[Антон Спирин]

Виктор Поляков, учитесь мыслить рационально. Оптимальней всего, в данном случае, где-то хранить состояние фильтра и фильтровать данные из store налету.

[Виктор]

Антон Спирин, Не обижайся мне такие ответы не нужны. До этого я и сам додумался. Вопрос был совсем о другом. Где-то, чего-то, налету и т.п. Если не знаешь, лучше не умничать, а подсказывать решение. С таким же успехом ты мог сказать, читай лучше документацию, мысли шире, думай объективно. Уже который раз я с таким сталкиваюсь, всем прям умные - умные а толком ответить не могут. Лучше вообще просто проходите мимо и всё.

[Антон Спирин]

Виктор Поляков, ваша ошибка указывает на то, что либо вы добавляли данные в store после монтирования приложения, либо вы у вас в коде просто описка получаете данные в переменную listPhoneState, а используете listPhoneSearch. Тут без вашего кода точнее не скажешь.

Если не знаешь, лучше не умничать, а подсказывать решение.

Я вам подсказал самое рациональное и правильное решение.

Answer 2

[Hlib]

Попробуй

useEffect(()=>{
    setSearchList([...listPhoneSearch])
})

Comments

[Виктор]

Не вариант, если делаю так, как ты написал, то происходит бесконечный перерендеринг, а если так делаю

useEffect(()=>{
    setSearchList([...listPhoneSearch])
}, [])

то опять приходит пустой массив.
Я законсолил и увидел, что компонент при первой загрузке или при перезагрузке браузера рендерится 2 раза. Первый раз со стора приходит пустой массив, который и попадает в useState, второй рендер дает уже заполненный массив, однако ни useEffect, ни setSearchList уже не меняю пустой массив