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

Posted

技术标签:

【中文标题】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' ])
    
  

【讨论】:

以上是关于React Typescript 尝试更改数组对象的状态导致错误的主要内容,如果未能解决你的问题,请参考以下文章