Reactjs 国家应该在哪里定义？

在React中定义状态的这两种构造之间有什么区别

class ProductsPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: []
    };
  }
  ...
}

这是：

class ProductsPage extends Component {
  state = {
    products: []
  };
  ...
}

在ES6中进行编码时，这两种方法都能很好地工作。但是，较低的一个在typescript 3中似乎不起作用。我有以下资料：

interface IState {
  products: IProduct[];
}

class ProductsPage extends Component<{}, IState> {
  state = {
    products: []
  };


  public componentDidMount() {
    this.setState({ products });
  }

  public render() {
    return (
      <div className="page-container">
        <ul className="product-list">
          {this.state.products.map(p => (
            <li className="product-list-item" key={p.id}>
              {p.name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

interface-IState{
产品:IProduct[];；
}
类ProductsPage扩展组件{
状态={
产品：[]
};
公共组件didmount（）{
this.setState（{products}）；
}
公共渲染（）{
返回(

{this.state.products.map（p=>(

{p.name}

))}

);
}
}

ts编译器标记了一个错误，说明：类型“never”上不存在属性id

为什么会这样？

第二种形式是第三阶段JavaScript提案（意味着它还不是语言的一部分）。在构造函数上添加属性是（称为最大最小类）

在您的情况下，没有功能上的差异

---

TypeScript要求您为类型安全性声明类字段，因此出现警告。

如何定义React组件的状态与编码样式React本身一样主观。通常我走的是非常严格的路线，如下所示：

type State = {
    someStateVar: number[];
};

export class MyComponent extends Component<{}, State> {
    public readonly state: State = {
        someStateVar: [],
    };

    public async componentDidMount() {
        // Dynamically fetch data (maybe via axios) and populate the new state
        const data = await axios.get<number[]>(...);
        this.setState({ someStateVar: data });
    }
}

类型状态={
someStateVar:number[]；
};
导出类MyComponent扩展组件{
公共只读状态：状态={
someStateVar:[]，
};
公共异步组件didmount（）{
//动态获取数据（可能通过axios）并填充新状态
const data=等待axios.get（…）；
this.setState（{someStateVar:data}）；
}
}

正如您所看到的，我明确地将

state

标记为readonly，只是要确保没有人试图直接向其写入（即使IDE和linter现在可以在没有预防措施的情况下检查这些错误）

我不喜欢使用assignment手动设置状态的另一个原因是，它可能会鼓励错误地处理状态。在类方法中，如果不使用

setState

，则永远不能将某些内容直接分配给

state

---

此外，我基本上是立即定义默认值，并在

componentDidMount

中用动态数据填充状态。这种方法允许您通过删除显式构造函数定义来保持代码简洁，因为您应该将这样的初始化移动到

componentDidMount

，并且如果不首先对绑定方法使用类成员箭头符号，则仅将构造函数用于绑定方法。

谢谢！