Reactjs， typescript 无法在组件内设置初始状态

Question

我是 React 的新手。我有一个呈现良好的组件，当我尝试初始化状态时，它说它找不到名称，因为我还没有声明它，那么我该如何正确初始化它？我正在使用:

"react": "^15.5.4", "react-dom": "^15.5.4",

下面一行的组件错误:

export class Profile extends React.Component<{}, state> {

constructor(props){
    super(props);
    this.state = [{name: 'baz'}, {name: 'shaz'}];
}

public render() {
    return (
        <section>
         <section>
             <h3>profile 1</h3>
             <div>baz</div>
         </section>
            <section>
                <h3>profile 2</h3>
                <div>shaz</div>
            </section>
        </section>
        )

}


 ReactDOM.render(
   >> this is where I call <Profile />,
    document.getElementById('app'),
)

编辑

所以在大家的帮助下我设法解决了这个问题:

interface State {
    name: string;
}

export class Profile extends React.Component<{}, State> {
    public state: State;

    constructor(props){
        super(props);
            this.state = {
               name: 'baz111'
            };
    }

    public render() {
        return (
            <section>
             <section>
                 <h3>profile 1</h3>
                 <div>baz</div>
             </section>
                <section>
                    <h3>profile 2</h3>
                    <div>{this.state.name}</div>
                </section>
            </section>
        )

    }
}

Answer 1

this.state 只是一个对象。在这种情况下，您可以在 this.state 对象上运行循环以获取每个名称的值，或者如果您愿意，可以将所有名称设置在另一个父对象下，例如:假设您想要将名称存储在用户键下。那就是，

constructor(props){
  super(props);
  this.state = {
    users: [
      {name: 'baz'}, {name: 'shaz'}
    ]
  };
}

现在您应该循环访问 this.state.users 以获取名称值。

例子，

// Loop using es6 map
componentWillMount() { 
  this.state.users.map( user => {
    console.log( user.name )
  } )
}