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()
    },[])

这就是我使用状态设置动态值的方式：

Last updated at {time.resolvedComplaintsTime}

这工作得很好，但是我想将数据存储在对象状态中，然后访问它，这会更加轻松和高效。我也想将此对象传递给另一个组件。这就是为什么我想要建立一个状态并在该状态下存储数据。

已解决：

因此，主要问题是在整个组件中访问数据。这是解决方案：

sendingTime正在初始化，但仅在发生渲染时才被初始化。因此，我们添加了一段代码来检查该状态是否已初始化。

这是我要显示数据的地方。

 <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

setSendingTime来自useState，因此是异步的：

致电时

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

状态sendTime尚未更新，因此它显示的初始值为{}

Answer 2

其他答案是正确的setState is asynchronous，因此您只能在下一次重新渲染时获得created_on= models.DateTimeField(default = timezone.now())的新值。正如@Enchew提到的那样，您很可能不想将对象设置为该值。

尝试以下方法：

sendingTime

您应该在console.log中看到希望看到的值，因为您使用的是本地范围的变量，而不是异步值，该异步值只会在下一次重新渲染时更新。

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

无法访问以反应状态存储的对象的属性

3 个答案: