这是在 React 中更改对象状态变量的最安全、最正确的方法吗？

Posted 2023-02-22

【中文标题】这是在 React 中更改对象状态变量的最安全、最正确的方法吗？

【英文标题】：Is this the safest, most correct way to change an object state variable in React?

【发布时间】：2021-11-10 04:30:18

【问题描述】：

以下代码有效，即成功更新对象状态变量：

import  useState  from 'react'
import './App.css';

function App() 
    const [config, setConfig] = useState(
        status: "online",
        maxFiles: 99
    );

    const addConfigEntry = () => 
        setConfig(n => 
            const n2 =  ...n ;
            n2.errors = 0;
            return n2;
        )
    ;
    return (
        <div className="App">
            <button onClick=addConfigEntry>Add a Entry</button>
            <ul>
                Object.entries(config).map((entry, index) => 
                    return (
                        <li key=index>entry[0] = entry[1]</li>
                    )
                )
            </ul>
        </div>
    );


export default App;

但是我收到了来自 TypeScript 的警告，这让我认为这不是更新对象变量的最佳方式：

是否有更正确、更符合 React 的方式来更新对象变量？

附录

请注意，这不起作用（回复评论）：

setConfig( ...config, errors: 0 ); // will not be added!
setConfig( ...config, errors2: 0 );

【问题讨论】：

setConfig( ...config, errors: 0 );

但是您还没有向您的州声明类型。我假设这就是您收到警告的原因。 ***.com/questions/53650468/… 您可以声明您的状态类型，带有可选错误，然后您的代码应该可以工作，或者在状态初始化期间将 errors 分配为空值。

@zerkms 但该解决方案只能工作一次，如果您像这样调用 setConfig 两次，第一次更改将被覆盖，请参阅上面的附录

@EdwardTanguay 我只评论了你提供的代码，我无法预测你还有什么想法 :shrug: 对于一个电话 - 这是完全有效的。

@zerkms 我认为是这样，因为确实如此。 ：-） 试试看。只有最后一个 setConfig 会起作用（在大多数情况下）。您需要使用更新程序功能来克服这个问题，就像我的原始代码一样。我相信这是一个异步问题。

【参考方案1】：

当你说，

const [config, setConfig] = useState(
        status: "online",
        maxFiles: 99
    );

TypeScript 根据您传递的初始状态对象推断配置的类型。所以，它认为config 看起来像：

type InferredConfig = 
  status: string;
  maxFiles: number;

请注意，解释类型中没有 errors，这就是您看到错误的原因。所以，我们需要明确地告诉类型。

您需要定义适当的type。这是一种方式：

import  useState  from 'react'
import './App.css';

// 1. We are defining the type, that *may* have errors prop
type Config = 
  status: string;
  maxFiles: number;
  errors?: number;


function App() 
    // 2. tell `useState` that it manages an object of type `Config`
    const [config, setConfig] = useState<Config>(
        status: "online",
        maxFiles: 99
    );

    const addConfigEntry = () => 
        setConfig(n => 
            const n2 =  ...n ;
            n2.errors = 0;  // 3. No error
            return n2;
        )
    ;
    return (
        <div className="App">
            <button onClick=addConfigEntry>Add a Entry</button>
            <ul>
                Object.entries(config).map((entry, index) => 
                    return (
                        <li key=index>entry[0] = entry[1]</li>
                    )
                )
            </ul>
        </div>
    );


export default App;