我有一个要导入的简单json文件，我想循环遍历并在div中输出json数据我可能想挑选json的一部分，但现在我只需要能够输出json我是否需要根据json数据创建一个数组，然后在其上进行映射.const showProductData = Object.keys(ProductData).map(function(key) { return <div>{ProductData[key]}</div>;});const App = () => { return ( <div> <h2>JSON</h2> {showProductData} </div> );};解决方案好吧，当我向您展示问题时，我立即想到了递归解决方案" :)所以基本上这是代码，我试图对其进行解释，您可以随时对其进行深入研究function getAllProps(obj) { let value = obj; // in case it is an object / array, which true, at any json file, at least at the beginning if (typeof obj === "object") { value = Object.keys(obj).map(key => { // and then check again if the value of the 'key' is an object // because we cant just out put object in react if (typeof obj[key] === "object") { // then out put the key name (property, 'ProductOne' for example) // and call the function again since we know it is an object. // basiclly the function will call it self again and again // until the value will be different than 'object' return ( <div key={key}> <div style={{ marginLeft: 20 }}> <strong> {key} </strong> {getAllProps(obj[key])} </div> </div> ); } return ( <div key={key} style={{ marginLeft: 20 }}> {key}: {obj[key]} </div> ); }); } return value;}const products = getAllProps(ProductData);const App = () => { return ( <div> <h2>JSON</h2> {products} </div> );};实际上，只需检查链接阅读评论，尝试了解我的递归解决方案" I have a demo hereI have a simple json file that I'm importing and I would like to loop through and output the json data in a divI'll probable want to pick out parts of the json but for now I just need to be able to output the jsonDo I need to create an array from the json data and then map over that.const showProductData = Object.keys(ProductData).map(function(key) { return <div>{ProductData[key]}</div>;});const App = () => { return ( <div> <h2>JSON</h2> {showProductData} </div> );}; 解决方案 well, when i show ur a question, immediately i thought 'recursive solution' :)so basically this is the code, I tried to explain it, feel free to dig into itfunction getAllProps(obj) { let value = obj; // in case it is an object / array, which true, at any json file, at least at the beginning if (typeof obj === "object") { value = Object.keys(obj).map(key => { // and then check again if the value of the 'key' is an object // because we cant just out put object in react if (typeof obj[key] === "object") { // then out put the key name (property, 'ProductOne' for example) // and call the function again since we know it is an object. // basiclly the function will call it self again and again // until the value will be different than 'object' return ( <div key={key}> <div style={{ marginLeft: 20 }}> <strong> {key} </strong> {getAllProps(obj[key])} </div> </div> ); } return ( <div key={key} style={{ marginLeft: 20 }}> {key}: {obj[key]} </div> ); }); } return value;}const products = getAllProps(ProductData);const App = () => { return ( <div> <h2>JSON</h2> {products} </div> );};actually, just check that linkread the comments, try to understand my 'recursive solution' 这篇关于React通过JSON对象循环并显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
