时间戳

首页 > 解决方案 > 如何在反应中隔离对象状态的对象属性？

reactjs - 如何在反应中隔离对象状态的对象属性？

问题描述

我有一个对象，里面有一个对象，并且我的组件中有一个数组作为状态。

const [courseAndUserIDs, setCourseAndUserIDs] = useState(null);

useEffect(() => {
        fetch(`http://localhost:8080/courses/${id}`)
            .then(resp => resp.json())
            .then(data => setCourseAndUserIDs(data))
            .catch(err => setIsErr(true));
    }, [])

此状态在组件安装后设置。此状态如下所示：

State
:
{course: {…}, userIDs: Array(4)}

course
:
{averageRating: 3, categories: Array(3), comments: …}

userIDs
:
[2, 5, 1, 6]

现在每次我想从一个course对象中获取一个属性时，我都必须输入这个：courseAndUserIDs.course.property我想缩短这个条目。我怎样才能做到这一点 ？

请记住，使用 useEffect 创建的效果在渲染提交阶段之后运行，因此在渲染周期之后运行。

标签： reactjs

解决方案

一种方法是定义一个中间变量const courses = courseAndUserIDs.course。

您还可以找到比 更短的名称courseAndUserIds。变量名中的“和”这个词对我来说似乎是一种代码味道。

或者，您可以分离状态：

const courses, setCourses = useState();
const users, setUsers = useState();

推荐阅读