我应该为每个属性使用单独的使用状态吗

Question

我写了以下代码：

function CreateModal({toggleCreatePorjectModal, fetchProjects}) {
    const [formObj, setFormObj] = useState({name: "", link: "", error: ""})


    function validateLinkAndCreateProject() {
        if(formObj.link.trim() === "" || formObj.name.trim() === "") {
            setFormObj(state => ({...state, error: "ALL fields are mandatory, please enter Project Name and Feed Link to create project."}))
            return
        }
        
        rssFeedParser(formObj.link.trim())
            .then((res) => {
                axios.post(`${ServerPath}/projects/create`, {
                    name: formObj.name, 
                    link: formObj.link
                })
                .then(response => {
                    if(response.data.error) {
                        setFormObj(state => ({...state, error: "Something went wrong. Please try again after some time."}))
                    } else {
                        fetchProjects()
                        toggleCreatePorjectModal(false)
                    }  
                })
                .catch((err) => {
                    setFormObj(state => ({...state, error: err.msg}))
                })
            })
            .catch((err) => {
                setFormObj(state => ({...state, error: err.msg})) 
            })
    }
    return  (
        <div >
            {/*Will Render Something based on above code*/}
        </div>
    )
}

我只使用了一个useState在一个对象中存储“name”、“link”、“error”等属性。因为我想将FormObj和ValidateLink的逻辑保持在一起。所有三个属性仅使用一个useEffect。因此，我认为最好将所有三个属性都保留在useState中，而不是创建3个不同的useState。

但是我的经理和技术架构师告诉我要为每个属性创建3个useState，一个useState，即为名称、链接和错误创建单独的useState。根据他们的说法，永远不要在useState内部创建像useState这样的对象（{name:，link:，error:}）。我应该始终为每个属性创建单独的useState。

根据我的理解，在旧的react中，我们过去只有一个状态，在一个对象中有30到40个属性。随着React钩子的引入，按照“关注点分离”，我们假设将相关逻辑与代码的其余部分分离。因此，我们将得到5到6个状态，它们的对象具有4到5个属性。

注意：这里的"分离关注点"是指以这样的方式打破类代码，依赖状态use效应useRef等保持在一起。

挂钩允许您根据相关部分（例如设置订阅或获取数据）将一个组件拆分为较小的函数，而不是根据生命周期方法强制拆分。

我想我错过了什么吗？？，可以创建useState（{name："，link："，错误: ""}). 还是应该为它们中的每一个创建单独的状态？

Answer 1

的确，useState完全替换了状态，但是您可以创建自己的自定义挂钩，您可以尝试使用spread操作符更新状态，例如{…obj，…values}，这样您就不必更新整个对象，spread操作符将负责。

我想你可以选择定制挂钩并管理它。

Answer 2

我知道这是一个老问题，但是如果有人想解决这个问题，我想说我已经用这种方法构建了一个完整的生产应用程序。每个页面（它是一个next.js的应用程序）使用一个useState，在它是一个有许多属性的反对。错误，表单数据，加载等。

如果您阅读了react文档，他们建议您不要使用react文档，因为每次都会重新评估对象，这可能会导致性能问题。即使这样，应用程序运行速度也很快。我觉得我们太过复杂了。当然，减速机会更好。但是，通过保持简单而不陷入抽象复杂性的开发速度比人们想象的要少得多的bug和性能问题。记住，反应团队是聪明的。他们不会让你失败的。如果它真的以一种很好的方式阻碍了性能，并且像useState一样是一件基本的事情，那么他们会特意阻止你做这些事情。

顺便说一句，这个制作应用程序每周为数百名订购食物的活跃用户提供服务，我们没有抱怨，只听到好消息。

Answer 3

这是一个判断调用，但是在大多数情况下，是的，对这三条状态信息中的每一条使用单独的useState调用（或者使用useReucer代替）。这样，设置它们就简单明了了。例如：

const [name, setName] = useState("");
const onNameChange = e => setName(e.target.value);

<input
    type="text"
    onChange={onNameChange}
>

基于类的组件获得一个setState函数，该函数接受部分状态更新并将它们合并到组件的状态中，但useState的setter不是这样工作的；它完全替换了状态项。这意味着，如果您使用的是问题中的复合状态项，则必须在每次调用setter时包含其所有部分

const [formObj, setFormObj] = useState({name: "", link: "", error: ""});
const onNameChange = ({target: {value}}) => setFormObj({...formObj, name: value}); // <== USUALLY WRONG

问题在于formObj中的数据可能已过时。您必须使用回调表单：

const [formObj, setFormObj] = useState({name: "", link: "", error: ""});
const onNameChange = ({target: {value}}) => setFormObj(formObj => ({...formObj, name: value}));

另一个问题是，如果在useffect/usemo//useCallback/等中使用这些状态中的任何一个作为依赖项，也很容易出错。

因此，是的，您的经理和技术架构师可能是正确的，使用单个useState调用（或useReducer）。但是，再一次，这是一种判断；您可以始终使用useFormObj的回调形式。

另一个选择：

您可以为表单对象创建一个钩子，其中包含接受字符串或事件的名称、链接和错误的单独设置器，如下所示：

// A reusable utility function: if the argument is an object with a `target` property,
// return `x.target.value`; otherwise, just return `x`.
function unwrapValue(x) {
    if (typeof x === "object" && x.target) {
        x = x.target.value;
    }
    return x;
}

// Off-the-cuff, untested, just a sketch
function useFormObj(initialFormObj = {name: "", link: "", error: ""}) {
    const [formObj, setFormObj] = useState(initialFormObj);
    const setters = useRef(null);
    if (!setters.current) {
        // Only true on first call
        setters.current = {
            setName(name) {
                name = unwrapValue(name);
                setFormObj(formObj => ({...formObj, name}));
            },
            setLink(link) {
                link = unwrapValue(link);
                setFormObj(formObj => ({...formObj, link}));
            },
            setError(error) {
                error = unwrapValue(error);
                setFormObj(formObj => ({...formObj, error}));
            },
        };
    }
    return [formObj, setters.current];
}

然后：

const [formObj, {setName, setLink, setError}] = useFormObj();

<input
    type="text"
    onChange={setName}
>

当您需要在多个组件中使用表单对象，或者您只想拥有更小的更容易测试的组件时，这很方便。

从留档（您必须稍微向下滚动到注释：）：

注意事项

与类组件中的setState方法不同，useState不会自动合并更新对象。您可以通过将函数updater表单与对象传播语法相结合来复制此行为：

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

另一个选项是useReducer，它更适合于管理包含多个子值的状态对象。