Невозможно получить доступ к свойствам объекта, хранящегося в состоянии реакции

Question

Я использую реагирующие хуки, и мне нужно сохранить данные с моего сервера, который является объектом, в состояние.

Это мое состояние:

  const [sendingTime,setSendingTime] = useState({})

Вот как я устанавливаю его внутри useEffect:

    const getTime= () =>{
        axios.get("https://localhost:1999/api/getLastUpdatedTime")
            .then(res => {

                console.log(res.data)

                setSendingTime({sendingTime : res.data})

                console.log('sendingTime is coimng',sendingTime)

            })
            .catch(err => console.error(err))
    }


 useEffect(() => {
        getCount()
        getTime()
    },[])

Теперь, когда я console.log о состоянии объекта, он возвращает пустой объект. Хотя, если я устанавливаю объект в любую переменную, а затем console.log, он не возвращает пустой объект. Но в обоих случаях я не могу получить доступ к свойствам объекта. Может кто-нибудь помочь мне с этим?

РЕДАКТИРОВАТЬ

Это то, что я делал ранее:

 const[time,setTime] = useState({
        totalComplaintsTime: '00:00',
        resolvedComplaintsTime: '00:00',
        unresolvedComplaintsTime:'00:00',
        assignedComplaintsTime:'00:00',
        supervisorsTime:'00:00',
        rejectedComplaintsTime:'00:00'

    })

  const getTime= () =>{
        axios.get("https://localhost:1999/api/getLastUpdatedTime")
            .then(res => {

                console.log(res.data)

                setTime({
                    totalComplaintsTime: res.data.Complaints[0].updatedAt,
                    resolvedComplaintsTime:  res.data.Resolved[0].updatedAt,
                    unresolvedComplaintsTime: res.data.Unresolved[0].updatedAt ,
                    assignedComplaintsTime: res.data.Assigned[0].updatedAt ,
                    rejectedComplaintsTime: res.data.Rejected[0].updatedAt,
                    supervisorsTime: res.data.Supervisors[0].updatedAt
                })



            })
            .catch(err => console.error(err))
    }

 useEffect(() => {

        getCount()

        // getTime()

        getTime()
    },[])

И вот как я использовал состояния для установки значений Dynami c:

Last updated at {time.resolvedComplaintsTime}

Это работает отлично, но я хотел сохранить данные в состоянии объекта и затем получить к ним доступ, что было бы проще и эффективнее , Также я хотел передать этот объект другому компоненту. Вот почему я хотел создать состояние и хранить данные в этом состоянии.

Решено:

Поэтому основной проблемой был доступ к данным во всем компоненте. Это решение:

sendTime инициализируется, но только когда происходит рендеринг. Поэтому мы добавляем фрагмент кода, чтобы проверить, инициализировано ли это состояние или нет.

Здесь я хотел отобразить данные.

 <div key={sendingTime.length}  className={classes.stats}>
            <UpdateIcon fontSize={"small"} /> Last updated at{" "}
              {Object.keys(sendingTime).length > 0 &&
              sendingTime.Complaints[0].updatedAt}
          </div>

Таким образом, я могу очень легко получить доступ к свойствам объекта, сохраненного в состоянии sendTime.

Спасибо всем, кто помог мне здесь.

Answer 1

Другие ответы верны, setState является асинхронным , поэтому вы сможете получить новое значение sendingTime только при следующем повторном рендеринге. И, как упоминает @Enchew, вы, вероятно, не хотите устанавливать объект в качестве этого значения, скорее всего.

Попробуйте вместо этого:

const [data, setData] = useState(undefined)

const getTime = () => {
  axios.get("https://localhost:1999/api/getLastUpdatedTime")
    .then(({ data }) => {
      console.log(data)
      setData(data)
    })
    .catch(err => console.error(err))
}

useEffect(() => {
  getCount()
  getTime()
}, [])

if (!data) return <p>No data...</p>

return (
  <>
    <p>Complaints: {data.Complaints[0].updatedAt}<p>
    <p>Resolved: {data.Resolved[0].updatedAt}<p>
    <p>{/* ...etc... */}</p>
  </>
)

Вы должны увидеть ожидаемое значение чтобы увидеть в console.log, потому что вы используете локальную переменную, а не асинхронное значение, которое будет обновлено только при следующем повторном рендеринге.

Answer 2

setSendingTime происходит от useState, поэтому оно асинхронно:

При вызове:

setSendingTime({sendingTime : res.data})
console.log('sendingTime is coimng',sendingTime)

Состояние sendTime не было обновлено, поэтому оно отображает начальное значение {}

Answer 3

setSendingTime работает асинхронно, и ваш объект, возможно, еще не сохранен в состоянии. Также обратите внимание на то, как вы экономите время в своем состоянии: вы оборачиваете результат данных в другой объект со свойством sendingTime, в результате чего получается следующий объект: sendingTime = { sendingTime: {/*data here */} }. Если вы работаете на sendingTime: {/*data here */}, попробуйте следующее:

const getTime = () => {
  axios
    .get('https://localhost:1999/api/getLastUpdatedTime')
    .then((res) => {
      console.log(res.data);

      setSendingTime(res.data);

      console.log('sendingTime is coimng', sendingTime);
    })
    .catch((err) => console.error(err));
};

Также посмотрите на это - как использовать хуки с обратным вызовом: https://www.robinwieruch.de/react-usestate-callback