Как осуществить перезапись useState([]) с 1 раза?

Question

[tron21]

Всем доброго времени суток. Продолжение моего предыдущего вопроса. Делаю задание на React. Есть функция которая добавляет отсортированные данные в массив для рендера карточек и в этой же функции идет проверка для изменения текста. Рендер происходит корректно, но сам массив в const [cards, setCards] перезаписывается только если кнопка поиска нажата 2 раза. С 1 раза массив остается таким-же как и был и из-за этого не меняется корректно текст. При этом в функцию обязательно нужно передавать параметр data (это обычная строка из input поиска). Подскажите, пожалуйста, что я упустил?

const [cards, setCards] = React.useState([]);
 const [inputValue, setInputValue] = React.useState('Поиск');

function handleStartSearch(data) {
  
  setCards(!data ? [] : dataJson.result.filter(item =>
          (item.title.includes(data) || item.author_lastName.includes(data)
         || item.author_firstName.includes(data)))
  )
    console.log(cards);
  if(cards.length > 0) {
    setInputValue(`По вашему запросу '${data}' мы нашли`)
  }
  else {
    setInputValue(`По вашему запросу '${data}' мы ничего не нашли`)
  }
}

Comments

[citizen55]

либо data не определена и записывается пустой массив, либо в dataJson ничего не найдено и снова вернется пустой массив. У вас же отладчик в браузере работает наверное, посмотрите что происходит

[tron21]

citizen55, data определена. Это обычная строка передается. Если в dataJson ничего не найдено и записывается пустой массив, то должен отображаться новый текст. Ниже ответили насчет того что операция не синхронная и поэтому нужно рендерить по новой либо делать по другому

Answer 1

[dm1sh]

В React операция setstate не синхронная, то есть, результат применения setCards будет виден только при перерендере компонента. Если вы хотите получить изменённый массив cards, то вам нужно либо создать временную переменную для этих данных и потом передать её в setCards:

const computedCards = // выражение, которое вы кладёте в setCatds
setCards (computedCards);
 console.log(computedCards);

Либо сделать чуть хитрее - следить за измением cards с помощью useEffect хука:

React.useEffect(() => {
  console.log(cards);
}, [cards]);

Comments

[tron21]

Спасибо большое за ответ. Подскажите, пожалуйста, по возможности.

В случае с 1 вариантом - у меня два set используется внутри функции. Я не понимаю чем заменить , например в этом месте setCards чтобы при этом сохранить еще setInputValue .

setCards(!data ? [] : dataJson.result.filter(item =>
          (item.title.includes(data) || item.author_lastName.includes(data)
         || item.author_firstName.includes(data)))

Данные в data я получаю с дочернего компонента, через инпут в виде строки и это функция по сабмиту. Все это я делаю в таком виде

const [query, setQuery] = React.useState('');

    function handleChangeQuery(e) {
        setQuery(e.target.value);
    } 

    function handleSubmit(e) {
        e.preventDefault();
        onValues(query);

    }

Насчет 2 варианта - Именно так я и хотел сделать изначально! Все через useEffect и ставить зависимость от изменения массива cards. Но я не могу найти информацию пока-что как передать date туда чтобы все правильно сработало.