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

Question

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

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 });

标签： javascriptreactjstypescriptstateuse-state

Answer 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;