Как вывести новые данные, которые пришли через props?

Question

[zlodiak]

Есть компонент, который получает данные из стора и помещает их в props

function Details(props: any) {
  let details: any
  const routeParams: any = useParams();	

  useEffect(() => {
    details = props.victims.find((victim: any) => routeParams.pk == victim.pk)
    console.log(details)
  }, [props.victims])
  
  return(
    <>
      {
        details && Object.keys(details.fields).map((f: string, i: number) => f)
      }
    </>
  )
}

const mapStateToProps = (state: appStateType) => {
  return {
    victims: state.victimsReducer.victims,
  }
}

export default connect(mapStateToProps, {})(Details);

Проблема в том, что useEffect отрабатывает после return. Но данные, которые мне необходимо отобразить формируются именно в useEffect. Поэтому браузер отображает пустой экран(хотя в консоли видно, что данные есть).

Помогите пожалуйста отобразить details.fields

Answer 1

[0xD34F]

Здесь useEffect не нужен. Замените его на useMemo или вообще не используйте никаких хуков, сразу доставайте нужное значение.