React readAsDataURLメソッドを使ってbase64形式にエンコードされたURLを配列に入れたい

Question

import React from 'react'
export default class ProductList extends React.Component {
constructor(props) {
    super(props)
    this.state ={
        file: "",
        imagePreviewUrl: ""
        }
  }

handleFileChange = (id,e) => {
    e.preventDefault()
    const products = this.props.products;
    let reader = new FileReader()
    let file = e.target.files[0]
    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }
    reader.readAsDataURL(file)
    this.props.file(id,  ???  )// ???の部分を色々試してみたがどれも期待値にならない
// 試したこと reader,reader.result,this.state.imagePreviewUrlを???に入れてみた

  }

}

render() {
const product =  this.props.products.map((product) => {
        if (product.isVisible === true ){
            return(
          <ul key={product.id}>
          <li>{product.title}</li>
          <li>{product.desc}</li>
          <li>{product.price}</li>
        <div>
        <button type="submit" onClick={() => this.delete(product.id)}>削除</button>
        <button type="submit" onClick = {(e) => this.handleButton(product.id , e)}>編集</button>
        </div>

        <div>
        <input type="file" onChange={(e) => this.handleFileChange(product.id, e)}/>
        <img src={this.state.imagePreviewUrl} />
        </div>

          {product.editIsVisible &&
          <EditForm
          product = {this.props.products}
          edit = {this.edit}
          id = {product.id}
          />}
          </ul>
            )
        }
    });
    const searchItem = this.props.products.filter( function( value ) {
       return value.isVisible === true
  })

    return (
      <div>
        <h1>商品リスト</h1>
        {product}
        <h3>商品件数は{searchItem.length}件です</h3>
      </div>
    )
  }

import React from 'react'

export default class ProductContainer extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        products: []
           }
    }

add = (title, desc, price) => {
      const newProducts = this.state.products
      const product = {
        id: newProducts.length + 1,
        title: title,
        desc: desc,
        price: price,
        fileName: ""      }
      newProducts.push(product)
      this.setState({products: newProducts})
    }

//fileName = reader.readAsDataURL(file)でbase64形式にエンコードされたURL
file = (id,fileName) => {
        const products = this.state.products;
       //画像を表示したい配列を取得
        const fileIndex = products.findIndex( product => product.id === id ) ;
//(例)"data:image/jpeg;base64,/9j/... をfileNameに上書き保存したい
        products[fileIndex].fileName = fileName 
        this.setState({products: products})
      }


render() {

  return (
    <div>
        <ProductForm add={this.add} />
        <ProductList
        products={this.state.products}
        file = {this.file}
        />
    </div>


  )
  }

・現在の問題は下記のように一つの画像を変更すると全ての画像が変更されて表示されてしまうことです。

・期待値としては配列ごとに違う画像を表示させるようにしたいです。

足りない情報や、試してほしい情報は遠慮なくお申し付けください！
お力をいただきたいです。

Comments

[hoshi-takanori]

imagePreviewUrl を products の各要素に持たせればいいと思いますが、ProductList と ProductContainer の関係がよく分かりません。

[pokerStars]

ご返信ありがとうございます。
ProductContainerに商品の一覧や、追加フォーム、編集フォームなどの機能を表示できるようなものにしています。
ProductListは商品の配列を一つずつに編集ボタンや削除ボタンなど、配列の中身をいじれるような機能にしています。
上記のコードにも少しだけ補足させていただきました！
自分もimagePreviewUrl を products の各要素に持たせれば表示できると考えているのですが、FileReaderのresultを取得できないのです。
コンソールではFileReaderのresultが ""と空白になっている部分とdate;image...となっている部分があるのですがなぜそのような値の中身の違いが発生しているのかも分からないです汗

Answer 1

いろいろ突っ込みどころはありますが、とりあえず以下の修正で動くのでは。

ProductList

• reader.onloadend で this.props.file を呼ぶ。引数に base64 形式でエンコードされた URL を追加。
• 画像の表示は各 product の imagePreviewUrl を使う。
• このコンポーネントには state は不要。

 handleFileChange = (id,e) => {
     e.preventDefault()
     const products = this.props.products;
     let reader = new FileReader()
     let file = e.target.files[0]
     reader.onloadend = () => {
-      this.setState({
-        file: file,
-        imagePreviewUrl: reader.result
-      });
+      this.props.file(id, file, reader.result);
     }
     reader.readAsDataURL(file)
-    this.props.file(id,  ???  )// ???の部分を色々試してみたがどれも期待値にならない
 // 試したこと reader,reader.result,this.state.imagePreviewUrlを???に入れてみた
 
   }

 render() {
 const product =  this.props.products.map((product) => {
         // 略
 
         <div>
         <input type="file" onChange={(e) => this.handleFileChange(product.id, e)}/>
-        <img src={this.state.imagePreviewUrl} />
+        <img src={product.imagePreviewUrl} />
         </div>

ProductContainer

• file メソッドに imagePreviewUrl 引数を追加。
• setState の際には、配列は作り直す必要があるので、引数なしの slice メソッドでコピー。
• setState の際には、オブジェクトも作り直す必要があるので、スプレッド構文を利用。

 add = (title, desc, price) => {
-      const newProducts = this.state.products
+      const newProducts = this.state.products.slice()
       const product = {
         // 略
     }

 //fileName = reader.readAsDataURL(file)でbase64形式にエンコードされたURL
-file = (id,fileName) => {
-        const products = this.state.products;
+file = (id, fileName, imagePreviewUrl) => {
+        const products = this.state.products.slice();
        //画像を表示したい配列を取得
         const fileIndex = products.findIndex( product => product.id === id ) ;
 //(例)"data:image/jpeg;base64,/9j/... をfileNameに上書き保存したい
-        products[fileIndex].fileName = fileName 
+        products[fileIndex] = { ...products[fileIndex], fileName, imagePreviewUrl } 
         this.setState({products: products})
       }

参考: JavaScriptで配列のコピー（値渡し） - Qiita
参考: オブジェクトのspread構文でのマージ - オブジェクト · JavaScript Primer #jsprimer

Comments

[pokerStars]

誠にありがとうございます！期待値の通りに動かすことができました！
なぜ動くようになったのかは今から学習していきたいと思います＞＜
感謝いたします！！！