Javascript 流错误无法获取'x'，因为'Array`[1]中缺少属性'y'

我有一个类型的国家警卫如下-

/** Type guard for states */
type demo= {
  demoList: {[key: number]: Array<{
        name?: string,
        length?: string,
    }>
  },
  status: boolean
}

当用户在name和length字段中输入内容时，我会在onChange方法中更新状态，如下所示

this.setState({
  demoList:
  { ...this.state.demoList, [index]: { name: inputName, length: inputLength} }
});

我遇到的错误是当我尝试在render（）中渲染值时。我试图通过如下方式获取名称或长度字段中的值来替换该值

this.state.demoList[index].name

但我得到的错误是

Cannot get `this.state.demoList[index].name` because property `name` is missing in  `Array` [1].Flow(InferError)

---

你知道我做错了什么吗？

我想你对

类型保护有意见。根据
类型
中给出的定义，您没有使用
类型防护装置

我根据您的问题创建了一个代码沙盒：


为了进一步澄清，您使用的是
类型保护
类型
，如下所示：

constructor(props: Object) {
    super(props);
    this.state = {
      demoList: {
        // eslint-disable-next-line no-useless-computed-key
        [0]: {
          name: '',
          length: '',
        }
      },
      status: false
    };
  }

但是，根据您的
类型防护装置的
类型定义，它应该用作：

constructor(props: Object) {
    super(props);
    this.state = {
      demoList: {
        // eslint-disable-next-line no-useless-computed-key
        [0]: [
          {
            name: "",
            length: ""
          }
        ]
      },
      status: false
    };
  }

分配给
demoList[0]
的值应该是
对象的
数组

它应该而不是为：

{
    name?: string;
    length?: string;
}

应该是：

[{
    name?: string;
    length?: string;
}]

< > >代码>状态< /代码>更新也应考虑<代码>拆卸器[0 ] < /代码>值为<代码>数组< /代码> <代码>对象< /代码> .<
它应该而不是类似于：

this.setState({
  demoList:
  { ...this.state.demoList, [index]: { name: inputName, length: inputLength} }
});

应该是这样的：

handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({
      ...this.state,
      demoList: {
        0: [{ name: e.target.value, length: e.target.value.length.toString() }]
      }
    });
  }

handleChange（e:React.ChangeEvent）{
这是我的国家({
…这个州，
人口统计：{
0:[{name:e.target.value，length:e.target.value.length.toString（）}]
}
});
}
根据您定义state对象的方式和用法，我发现您希望创建一个对象，其中键列表为数字，对象为属性。但是您在
演示
类型中所做的是，您将它定义为一个键对象，作为数字，值作为对象数组

下面，您将看到我根据您的帖子在try流中所做的更改。注意我评论过的区域，这是我唯一需要做的小改动

import React from 'react';

/** Type guard for states */
type demo = {
  demoList: {
    [key: number]: { // You previously have this as Array<{ ... }> but it should just be an object
        name?: string,
        length?: string,
    },
  },
  status: boolean,
}

class Comp extends React.Component<{}, demo> {
  constructor(props: {}) {
    super(props);

    this.state = {
      demoList: {
        // eslint-disable-next-line no-useless-computed-key
        [0]: {
          name: '',
          length: '',
        }
      },
      status: false
    };
  }

  changeState(index, inputName, inputLength) {
    this.setState({
      demoList:
      { ...this.state.demoList, [index]: { name: inputName, length: inputLength} }
    });
  }

  render() {
    const index = 0;
    this.state.demoList[index].name

    return null;
  }
}

从“React”导入React；
/**国家类型保护*/
类型演示={
人口统计：{
[key:number]：{//您以前将此作为数组，但它应该只是一个对象
名称？：字符串，
长度？：字符串，
},
},
状态：布尔，
}
类Comp.Component{
构造函数（props:{}）{
超级（道具）；
此.state={
人口统计：{
//eslint禁用下一行没有无用的计算密钥
[0]: {
名称：“”，
长度：''，
}
},
状态：false
};
}
changeState（索引、inputName、inputLength）{
这是我的国家({
人口统计：
{…this.state.demoList，[索引]：{名称：inputName，长度：inputLength}
});
}
render（）{
常数指数=0；
this.state.demoList[index].name
返回null；
}
}
他问的是flow而不是typescript。更可能的情况是，他希望修改自己的类型以符合自己的应用程序，而不是编写自己的类型，然后将整个应用程序更改为适合自己的类型。我不同意你的观点，因为改变
类型
定义以使代码块工作并不是一开始就应该考虑的。这就是为什么类型脚本的类型安全性被发明来使JavaScript应用程序类型安全和健壮。如果认为使用了类型保护，应用程序应该尊重它并遵循它。更改
类型
以支持代码可能会很危险。一个类型可以映射到应用程序中的多个位置，更改
类型
定义以使代码正常工作是不可接受的。
import React from 'react';

/** Type guard for states */
type demo = {
  demoList: {
    [key: number]: { // You previously have this as Array<{ ... }> but it should just be an object
        name?: string,
        length?: string,
    },
  },
  status: boolean,
}

class Comp extends React.Component<{}, demo> {
  constructor(props: {}) {
    super(props);

    this.state = {
      demoList: {
        // eslint-disable-next-line no-useless-computed-key
        [0]: {
          name: '',
          length: '',
        }
      },
      status: false
    };
  }

  changeState(index, inputName, inputLength) {
    this.setState({
      demoList:
      { ...this.state.demoList, [index]: { name: inputName, length: inputLength} }
    });
  }

  render() {
    const index = 0;
    this.state.demoList[index].name

    return null;
  }
}