Почему в функции старое значение стейта?

Question

[Артур]

Всем привет.

Есть реактовский компонент на хуках
В котором беруться данные из редакса, модифицируются и пробрасываются в дочерний компонент.

Дочерний компонент по клику делает запрос и обновляет данные редакса (те которые изменяются в родительском и отображаются в текущем), что подрузомевает что он должен перерисоваться.

так вот иногда в дочернем компоненте устаревшие данные в функции onClick
т.е например в редаксе уже длина filteredData больше и родительский об этом знает, но в дочернем в коллбэк функции onClick, старое значение, буд-то реакт ее не обновил

псевдокод

//родительский компонент
const [filteredData, setFilteredData] = useState([])
const data = useSelector(state=> state.data)
useEffect(() => {
  setFilteredData(data.filer(condition))
}, [data])

const onChildComponentClick = () => {
  alert(filteredData.length)
}

//конец

//дочерний компонент
{filteredData, onChildComponentClick} = props

return(<>
  <div onClick={onChildComponentClick}></div>
  <div>
     filteredData.map((number) => <p onClick={fetchDataAndSaveInReduxForParent}>{number}</p>)
  </div>
</>)
//конец

Answer 1

[McBernar]

Повесьте на div key какой-нибудь уникальный.