React hooks useState set数据失效

原创已于 2022-09-13 16:47:29 修改 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #typescript

于 2021-01-20 23:00:47 首次发布

Typescript 专栏收录该内容

4 篇文章

订阅专栏

1、栗子

interface per{
  contractId?:string | any,
  orgId?:string | any,
  contractName?:string | any,
  orgName?:string| any,
  post?:string| any,
  phone?:string| any,
  email?:string| any,
}
const contactObj:per = {
    orgId: '',
    contractName: '',
    orgName: '',
    post: '',
    phone: '',
    email: '',
  };
const [dataSource, setDataSource] = useState<per[]>([contactObj]);
const addConcatA = async () => {
    dataSource.push(contactObj);
    setDataSource(dataSource);
  };
const addConcatB = async () => {
    // @ts-ignore
    setDataSource([...dataSource, { ...contactObj}]);
  };

2. 执行 addConcatA 数据不会更新，通过执行addConcatB 数据生效，解决方案：通过解构的方式实现，原因：目前不是很确定，找到问题再更新

QQ技术交流群：707 196 135 (大前端技术交流群)