Javascript 如何输出状态的键和值？

我希望能够在我的状态下输出项的键和键的值。我尝试使用

{[this.state[field]]}

，但也不起作用

例如：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
类型：“valueOfType”，
子类型：“valueOfSubType”，
另一件事：“其他人的价值”
}
}
renderItem=（字段）=>{
返回{['nameOfKey']}:{field}
}
render（）{
const{type，subType，anotherThing}=this.state；
返回(
实际输出：

{this.renderItem（类型）}
{this.renderItem（子类型）}
{这个。renderItem（另一个）}

所需输出：

type:valueOfType
子类型：valueOfSubType
另一件事：其他的价值
)
}
}

正如@Li357建议的那样，您可以将密钥作为字符串传递，并像

这样使用它。在方法中声明[field]

。或者，您可以使用

Object.entries

和

map

呈现所有字段

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
类型：“valueOfType”，
子类型：“valueOfSubType”，
另一件事：“其他人的价值”
}
}
renderItem=（字段）=>{
返回{field}:{this.state[field]}
}
renderAll=（）=>Object.entries（this.state）.map（[key，value]）=>
{key}:{value}

);
render（）{
返回(
实际输出：

{this.renderItem（“type”）}
{this.renderItem（“子类型”）}
{this.renderItem（“另一个”）}

{this.renderAll（）}

所需输出：

type:valueOfType
子类型：valueOfSubType
另一件事：其他的价值
)
}
}
render（，document.getElementById（“根”））
将密钥作为字符串传递。然后在
renderItem
中执行
this.state[field]
以获取与该键关联的值。
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        type: 'valueOfType',
        subType: 'valueOfSubType',
        anotherThing: 'valueOfOther'
    }
  }

  renderItem = (field) => {
     return <div>{['nameOfKey']}: {field}</div>
  }

  render() {
    const { type, subType, anotherThing } = this.state;
    return (
      <div>
        <p><strong>Actual output:</strong></p>
        {this.renderItem(type)}
        {this.renderItem(subType)}
        {this.renderItem(anotherThing)}

        <hr/>
        <p><strong>Desired output:</strong></p>
        <div>type: valueOfType</div>
        <div>subType: valueOfSubType</div>
        <div>anotherThing: valueOfOther</div>
     </div>
    )
  }
}