React Typescript 尝试更改数组对象的状态导致错误

Posted 2023-02-22

【中文标题】React Typescript 尝试更改数组对象的状态导致错误

【英文标题】：React Typescript trying to change state of an array objects resulting in error

【发布时间】：2021-12-25 01:22:07

【问题描述】：

我是 Typescript 的新手，我尝试将一个新对象推送到 React 状态的数组，但出现以下错误：

Type ' name: string; address: string; [] | null' is not an array type.ts(2461)
const info: 
    name: string;
    address: string;
[] | null

代码如下：

interface StateProps 
  info: 
    name: string;
    address: string;
  [];



function App() 
  const [info, setInfo] = useState<StateProps["info"] | null>(null);

  const nameHanlder = () => 
//the editor highlight ...info as an error
    setInfo([...info,  name: "foo", address: "bar" ]);
  ;

  return (
    <div className="App">
      <p></p>
      <button onClick=nameHanlder>add name</button>
    </div>
  );

【参考方案1】：

info 也可能是null，这就是您收到错误的原因。你可以检查一下，info 是一个数组。

  const nameHanlder = () => 
    if (Array.isArray(info)) 
      setInfo([...info,  name: 'foo', address: 'bar' ])