将函数返回值传递给子组件作为道具

Question

I have a react child component rendering in a loop in parent component. eg in parent component I have as such:

<div className="md-grid">
                  {images
                    ? images.map((img, index) => (
                      <PinnedImage
                        key={index}
                        name={img.mediaName}
                        picture={img.downloadURL}
                        imageSRC={this.createImageSrc(img.downlaodURL)}
                        onClick={this.downloadDoc.bind(
                          this,
                          img.downloadURL
                        )}
                      />
                    ))
                    : null}
                </div>

I want to call a function in parent which is authorized fetch request to the file server using REST Endpoint. I am calling the function on imageSRC props of the child component . Below are the functions.

  async createImageSrc (url) {
    console.log('createImageSrc called', { url })
    if (url) {
      const downlaodURL = `${PROTOCOL}${url}`
      console.log({ downlaodURL })
      const token = localStorage.getItem('access_token')
      const headers = new Headers({ Authorization: `Bearer ${token}` })
      const options = {
        method: 'GET',
        headers,
        mode: 'cors',
        cache: 'default'
      }
      const request = new Request(downlaodURL)
      const finalResponse = await fetch(request, options).then(response => {
        response.arrayBuffer().then(buffer => {
          const base64Flag = 'data:image/jpeg;base64,'
          const imageStr = this.arrayBufferToBase64(buffer)
          const imageSRC = base64Flag + imageStr
          console.log({ imageSRC })
          return imageSRC
        })
      })
      console.log({ finalResponse })
      return finalResponse
    }
  }

arrayBufferToBase64 (buffer) {
    let binary = ''
    const bytes = [].slice.call(new Uint8Array(buffer))
    bytes.forEach(b => {
      binary += String.fromCharCode(b)
    })
    return window.btoa(binary)
  }

I wanted the result of this createImageSrc to be pass as PROPS to the child component through imageSRC={this.createImageSrc(img.downlaodURL)} But I am not getting as expected. What am I doing wrong? I am stuck. Thanks

Answer 1

You're trying to use an asynchronous method in your render method.

What you want to do is instead move your call to createImageSrc from the render method into either componentDidUpdate or componentDidMount and make it so that your createImageSrc updates the state when fetching is done.

Here is pseudo code of what you should do

async function createImageSrc(url) {
  const imageSRC = fetch();
  return imageSRC;
}

class YourComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      imagesWithSrc: null
    };
  }

  componentDidMount(props) {
    if (props.images) {
      this.fetchImageSrc(props.images);
    }
  }

  fetchImageSrc = (images) => {
    const promises = images.map((img) => createImageSrc(img.downloadURL));
    Promise.all(promises).then((...imageSRCs) => {
      const newImages = images.map((img, idx) => { 
        return {
          ...img,
          imageSRC: imageSRCs[idx]
        };
      });
      this.setState({ imagesWithSrc: newImages });
    });
  }

  render() {
    const { imagesWithSrc } = this.state;
    return (
      <div className="md-grid">
        { imagesWithSrc
           ? imagesWithSrc.map((img, index) => (
              <PinnedImage
                key={index}
                name={img.mediaName}
                picture={img.downloadURL}
                imageSRC={img.imageSRC}
                onClick={this.downloadDoc.bind(
                      this,
                      img.downloadURL
                    )}
              />
            ))
        : null}
      </div>
    );
  }
}

Side note just wanted to let you know that you spelled downloadURL wrong in a few places

Answer 2

the problem is child component will not know when promise will be fulfilled. you will have tell child component when promise fulfilled.

if you are using redux add image loaded to store where each child can get its source on re-render.

    <div className="md-grid">
                  {images
                    ? images.map((img, index) => (
                      <PinnedImage
                        key={index}
                        id={index[or some other unique id]}
                        name={img.mediaName}
                        picture={img.downloadURL}
                        imageSRC={this.createImageSrc(img.downlaodURL,id[same id used as child id])}
                        onClick={this.downloadDoc.bind(
                          this,
                          img.downloadURL
                        )}
                      />
                    ))
                    : null}
                </div>


    async createImageSrc (url,id) {
    console.log('createImageSrc called', { url })
    if (url) {
      const downlaodURL = `${PROTOCOL}${url}`
      console.log({ downlaodURL })
      const token = localStorage.getItem('access_token')
      const headers = new Headers({ Authorization: `Bearer ${token}` })
      const options = {
        method: 'GET',
        headers,
        mode: 'cors',
        cache: 'default'
      }
      const request = new Request(downlaodURL)
      const finalResponse = await fetch(request, options).then(response => {
        response.arrayBuffer().then(buffer => {
          const base64Flag = 'data:image/jpeg;base64,'
          const imageStr = this.arrayBufferToBase64(buffer)
          const imageSRC = base64Flag + imageStr
          console.log({ imageSRC })
            this.props.dispatch ({type:"imageLoaded",payload:{src:imageSRC,id:id}})
       //   return imageSRC
        })
      })
      console.log({ finalResponse })
      return finalResponse
    }
  }

arrayBufferToBase64 (buffer) {
    let binary = ''
    const bytes = [].slice.call(new Uint8Array(buffer))
    bytes.forEach(b => {
      binary += String.fromCharCode(b)
    })
    return window.btoa(binary)
  }