Despite I get different values of images in base64 when fetching data, but the same image is output for all images when rendering

huangapple
go评论80阅读模式
英文:

Despite I get different values of images in base64 when fetching data, but the same image is output for all images when rendering

问题

以下是您提供的内容的翻译部分：

我有一个服务器，我在其中以base64格式存储用户图像。我尝试获取并呈现它，但我一直得到相同的图像。我理解问题很可能是React的特定工作，但我不明白问题究竟是什么。

这是我尝试过的内容：

我有一个渲染具有不同props“name”的Dialog组件的Viewer类。

  1. class Viewer extends Component {
  2.       render() {
  3.         return (
  4.           <View>
  5.             <Dialog name={'0'} id={'0'}/>
  6.             <Dialog name={'54353'} id={'54353'}/>
  7.             <Dialog name={'54354'} id={'54354'}/>
  8.           </View>
  9.         );
  10.       }
  11. }

在Dialog中，我有一个获取以base64格式获取数据的getImage方法，当componentDidMount时将其设置为“img”。

  1. componentDidMount(){
  2.     this.img = this.getImage(this.name);
  3. }
  5. getImage(_id) {
  6.         //this.setState({ loading: true });
  7.         const fileBlob = new FileReader(); // BLOB
  8.         /*this.setState({ 
  9.           loading: true
  10.         });*/
  11.         fetch(domenName + '/server/getUserImageById.php?user_id=' + _id)
  12.           .then(response => response.blob())
  13.           .then(response => {
  14.               this.loading = false;
  15.               this.setState({loading: false});
  16.               response.size == 0 ? img = domenName + '/assets/img/noimage.png':
  17.                 [fileBlob.readAsDataURL(response), fileBlob.onload = () => {
  18.                   //console.log(this.loading);
  19.                   img = fileBlob.result;
  20.                   //console.log("id:" + _id);
  21.     
  22.                 }]
  23.           }).catch(error => {
  24.             this.loading = false;
  25.             //this.setState({loading: false});
  26.             //console.log('error') 
  27.           })
  28.         return img;
  29. }

尽管在获取数据时我获得不同值的base64图像，但在呈现时所有图像都输出相同的图像。

输出

  1.     class Dialog extends Component {
  2.       render(){
  3.         console.log(this.loading);
  4.     
  5.         if(this.loading){
  6.           return (
  7.             <View>
  8.               <Text>Loading...</Text> 
  9.               <Text>我是用户 №{this.id}！</Text> 
  10.             </View>    
  11.           );
  12.         }
  13.         else{
  14.           return (
  15.             <View>
  16.               <Image 
  17.                 key={this.id}
  18.                 source={{uri: this.img}} 
  19.                 style={{ width: 60, height: 60, borderRadius: 30 }} 
  20.               />
  21.               <Text>我是用户 №{this.id}！</Text> 
  22.             </View>    
  23.           );
  24.         }
  25.       }
  26.     }

示例链接：https://snack.expo.dev/@konst1966/ea6dad

英文:

I have a server where I store user images in base64 format. Im trying to fetch and render it, but I keep getting the same image. I understand that the problem is most likely in the particular work of react, but I don't understand what exactly the problem is.

Here's what I tried:

I have class Viewer that renders components Dialog with different props "name"

  1. class Viewer extends Component {
  2.       render() {
  3.         return (
  4.           &lt;View&gt;
  5.             &lt;Dialog name={&#39;0&#39;} id={&#39;0&#39;}/&gt;
  6.             &lt;Dialog name={&#39;54353&#39;} id={&#39;54353&#39;}/&gt;
  7.             &lt;Dialog name={&#39;54354&#39;} id={&#39;54354&#39;}/&gt;
  8.           &lt;/View&gt;
  9.         );
  10.       }
  11. }

In Dialog I have method getImage that fetch data in base64 and when componentDidMount setting it to "img"

  1. componentDidMount(){
  2.     this.img = this.getImage(this.name);
  3. }
  5. getImage(_id) {
  6.         //this.setState({ loading: true });
  7.         const fileBlob = new FileReader(); // BLOB
  8.         /*this.setState({ 
  9.           loading: true
  10.         });*/
  11.         fetch(domenName + &#39;/server/getUserImageById.php?user_id=&#39; + _id)
  12.           .then(response =&gt; response.blob())
  13.           .then(response =&gt; {
  14.               this.loading = false;
  15.               this.setState({loading: false});
  16.               response.size == 0 ? img = domenName + &#39;/assets/img/noimage.png&#39;:
  17.                 [fileBlob.readAsDataURL(response), fileBlob.onload = () =&gt; {
  18.                   //console.log(this.loading);
  19.                   img = fileBlob.result;
  20.                   //console.log(&quot;id:&quot; + _id);
  21.     
  22.                 }]
  23.           }).catch(error =&gt; {
  24.             this.loading = false;
  25.             //this.setState({loading: false});
  26.             //console.log(&#39;error&#39;) 
  27.           })
  28.         return img;
  29. }

Despite I get different values of images in base64 when fetching data, but the same image is output for all images when rendering

Output

  1.     class Dialog extends Component {
  2.       render(){
  3.         console.log(this.loading);
  4.     
  5.         if(this.loading){
  6.           return (
  7.             &lt;View&gt;
  8.               &lt;Text&gt;Loading...&lt;/Text&gt; 
  9.               &lt;Text&gt;Im user №{this.id}!&lt;/Text&gt; 
  10.             &lt;/View&gt;    
  11.           );
  12.         }
  13.         else{
  14.           return (
  15.             &lt;View&gt;
  16.               &lt;Image 
  17.                 key = {this.id}
  18.                 source={{uri: this.img}} 
  19.                 style={{ width: 60, height: 60, borderRadius: 30 }} 
  20.               /&gt;
  21.               &lt;Text&gt;Im user №{this.id}!&lt;/Text&gt; 
  22.             &lt;/View&gt;    
  23.           );
  24.         }
  25.       }
  26.     }

Link to sandbox with example:
https://snack.expo.dev/@konst1966/ea6dad

答案1

得分: 0

将fetch()函数移到componentDidMount解决了这个问题。
另外，在.then(response)=>{}中添加以下代码：

  2.     this.setState({image:img})
英文:

Solved the problem by moving the fetch() function to componentDidMount.
Also adding to .then(response)=>{} this code:

  2.     this.setState({image:img})

huangapple
  • 本文由 发表于 2023年5月18日 13:34:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/76277999.html
  • fetch-api
  • image
  • react-native
  • rendering
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定