javascript - 从另一个文件组织和设置状态

Question

我有一些数据（对象）存在于它们自己的文件（Origin.js）中。

此数据正在另一个名为 的对象中使用扩展运算符导出OriginState：

起源.js

//info
const info = {
    title: '',
    year: '',
};

//images
const images = {
    logo: '',
    heroImage: '',
};

//text
const text = {
    header: '',
    body: '',
};

export const OriginState = {
    ...info,
    ...images,
    ...text,
};

我将我的OriginState对象导入另一个文件并将其state用于我的应用程序，如下所示：

其他文件.js

import { OriginState } from './Origin.js';

    const [state, setState] = useState({
        ...OriginState,
    });

这是一个示例处理程序，我稍后在其中使用此状态更新输入中的某些指定状态值：

const handleChange = (e) => {
    const { name, value } = e.target;
    setState((state) => ({
        ...state,
        [name]: value,
    }));
};

现在，我的问题是......这样存储不正确state吗？

此外，我是否setState在处理程序函数中使用不正确？

在大多数情况下，我见过这样声明和更新的状态，这显然更容易阅读：

const [count, setCount] = useState(0);
setCount(count + 1)

但是我有很多state并且不认为拥有多个setState钩子是一个好主意。

有一个更好的方法吗？我现在的感觉是不对的。

标签： javascriptreactjsstate

Answer 1

像这样存储状态是不正确的吗？

const handleChange = (e) => {
    const { name, value } = e.target;
    setState((state) => ({
        ...state,
        [name]: value,
    }));
};

不，一点也不，事实上，它通常是状态更新的首选模式。

任何时候您的状态更新取决于先前的状态，即经典的反例，或者在您的情况下，当存在嵌套状态时，您应该使用功能状态更新来从先前的状态更新，而不是从先前的渲染周期更新.

此外，我是否在处理程序函数中错误地使用了 setState？

在大多数情况下，我见过这样声明和更新的状态，这显然更容易阅读：

const [count, setCount] = useState(0);
setCount(count + 1)

我认为处理程序中的状态更新逻辑没有问题。在这个count例子中，更新这样的计数将（应该）被认为是不正确的。请参阅此代码框演示，该演示试图显示非功能和功能状态更新之间的问题。

正确的状态更新应该是setCount(count => count + 1)

但是我有很多状态，并且认为拥有多个 setState 钩子不是一个好主意。

有一个更好的方法吗？我现在的感觉是不对的。

当谈到表单输入和状态时，我认为拥有一个平面对象是有意义的。useState尽管在使用具有“复杂”状态形状的单个useState钩子或为每个“块”状态使用单个钩子时，通常没有真正的正确或错误答案。这是一个固执己见的答案，主要是做对特定用例有意义的事情。

一般来说，虽然我会说如果一组值甚至松散相关，那么将它们存储在一个公共对象中也许是有意义的，但这是我的观点。

不过，我看到您导入的数据的一个潜在问题是您可能会通过使用 Spread 语法无意中覆盖某些键值对。

export const OriginState = {
    ...info,
    ...images, // <-- could overwrite values from info
    ...text, // <-- could overwrite values from info and images
};