javascript - ReactJS:如何列出状态的所有属性？

Question

我是 ReactJS 的新手，但我有使用 Python 和 C++ 的经验。

我想要做的是一个函数(或者可能是一个类？)，它将某个对象作为输入并在屏幕上显示其状态的所有属性。

我不知道那些属性可能是什么，我也不知道有多少，想想看，那些属性可能有自己的属性。

是否有某种函数能够循环遍历状态中的所有属性？我还可以使用哪些其他方法？

Answer 1

你应该使用 Object.keys .它返回一个包含所有属性名称的数组。

您还可以使用 Object.values , 返回键的所有值。

例如

const state = {
    hey: 123,
    name: 'edu'
}

console.log(Object.keys(state))

如果您使用的是 React，则可以将 Object.keys 与 .map 一起使用，并显示状态(或任何对象)的所有属性。

class App extends React.Component {
    state = {
        name: 'edu',
        hey: 123
    }

    render(){
        return (
            <div>
                {Object.keys(this.state).map(key => <div key={key}>{key}</div>)}
            </div>
        )
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

你也可以使用 JSON.stringify这会将所有对象转换为 json。这样您将能够看到对象的所有属性和值。

请小心，因为如果对象有循环引用，您可能会出错。