简体   繁体   English

如何输出状态的键和值?

[英]How can I output both the key and value of my state?

I want to be able to output both the key and the value of the key of items in my state. 我希望能够在我的状态下同时输出项的键和键的值。 I tried using {[this.state[field]]} but that didn't work either. 我尝试使用{[this.state[field]]}但这也不起作用。

Example: https://jsfiddle.net/n5u2wwjg/164470/ 示例: https//jsfiddle.net/n5u2wwjg/164470/

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>
    )
  }
}

As @Li357 suggested you can pass the key as a string and use it like this.state[field] in your method. 就像@ Li357所建议的那样,您可以将密钥作为字符串传递,并在方法中像this.state[field]一样使用它。 Alternatively, you can use Object.entries and map to render all the fields. 或者,您可以使用Object.entriesmap来呈现所有字段。

 class App extends React.Component { constructor(props) { super(props) this.state = { type: 'valueOfType', subType: 'valueOfSubType', anotherThing: 'valueOfOther' } } renderItem = (field) => { return <div>{field}: {this.state[field]}</div> } renderAll = () => Object.entries( this.state ).map( ([key,value]) => <p>{key}:{value}</p> ); render() { return ( <div> <p><strong>Actual output:</strong></p> {this.renderItem("type")} {this.renderItem("subType")} {this.renderItem("anotherThing")} <hr /> {this.renderAll()} <hr /> <p><strong>Desired output:</strong></p> <div>type: valueOfType</div> <div>subType: valueOfSubType</div> <div>anotherThing: valueOfOther</div> </div> ) } } ReactDOM.render(<App />, document.getElementById("root")); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更新for循环以输出参数URL键值对? - How can I update my for loop to output my parameter URL key value pairs? 如何使用键值创建数组并设置新状态? - How can I create an array with key value and set new state? 如何检查this.state中的两个数组是否包含相同的值? - How Can I check if both Arrays inside this.state contains same value? 如何通过比较 arrays 中的 id 将第一个数组中的值分配给第二个数组中的新键。 在 javascript - How can i assign value in first array to new key in second array by comparing id in both arrays . in javascript 如何应用groupBy但使用其他值作为密钥? - How can I apply groupBy but use a different value as my key? 如何将密钥添加到 state 挂钩? - How can i add a key to state hook? 如何通过从json文件中提取数据来将键值对数组加载到状态中? - How can I load a key value pair array into state, by pulling data from a json file? 如何在 Rails 后端和浏览器的 Javascript 中为字符串生成哈希值? - How can I generate a hash value for a string on both my Rails backend and in Javascript on the browser? 如果值 label 已经存在于我的 state 但新值将被包含在内,我该如何跳过 label? - How can I skip the label if the value label already exists on my state but the new value will be included? 如何将状态元素推送到状态数组? - How I can push my state elements to the state array?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM