javascript - 如何在 reactjs 中渲染对象？

Question

我的对象是：

我想从recette获取数据-...比如base64

    const articleList = Object.keys(this.state.users).map(key => {
    Object( this.state.users[key].recettes).map(data => {
      // Object.entries( data ).map(infos => {
      //   console.log(infos + data)
      // })  
      console.log(data)
      })
})

标签： javascriptreactjs

Answer 1

尝试将您的 base64 编码图像作为 Image 对象的直接源传递。

import React, {Component} from 'react';

export default class Example extends Component {
   state = {
      images: []
   };


   componentDidMount(){
     let images = [];
     let keys = [];
     Object.keys(this.state.users).map(key => {
        keys.push(key);
     });
     keys.map(_key => {
        Object.keys(this.state.users[`${_key}`].recettes).map(key=> {
            let image = new Image();
            image.src = this.state.users[`${_key}`].recettes[`${key}`].base64;
            images.push(image);
        });
     }); 
     this.setState({images: images});
   }


   render(){
     return(
       <div>
         {this.state.images}
       </div>
     )
   }
}

现在我可能在解析您的数据时犯了一个错误，因为我只有它们在图像中并且看不到我为验证和调试而编写的输出，但您明白了。此外，我对收集对象键的过程进行了一些分解，以使其更具可读性并减少嵌套循环的数量。关键是你应该按照你的意图解析你的数据，一旦你到达可以访问 base64 图像的点，你将它作为一个源传递给一个新的图像，并让状态处理其余的。希望这有效并有所帮助。