React：stateの値がループすると変わってしまう（DOMに反映されない）

Question

前提・実現したいこと

React-Reduxで多言語対応Webアプリを作っています。

APIからJSONを取得して、JSONの中身を翻訳し、翻訳済みの文字列をstateセットし、DOMに反映することです。

発生している問題・エラーメッセージ

JSONの中身を翻訳し、stateにセットできている事までは確認できていますが、なぜか map でループすると中身が翻訳前になってしまいます。

Redux-sagaを利用しており、流れは

componentDidMount()でAPIを叩く（/components/home.js）
→ APIから返ってきたJSONをgoogle translateで翻訳 （/sagas/index.js）
→ reducerを通して、stateにセット（/reducers/indexReducer.js）
→ mapループで要素を作成（/components/home.js）
→ DOMに反映（/components/home.js）
の流れになっています。

consoleで確認すると日本語ですが、DOMは英語になってしまいます。

該当のソースコード

/components/home.js

import React, { Component } from 'react';
import HeaderComponent from './layouts/Header';
import FooterComponent from './layouts/Footer'

// CSS
import '../css/layout.scss';

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentDidMount = async () => {
    await console.log('did mount');

    await this.props.getTrips(this.props.lng)
    await console.log(this.props.trips);
    
  }

  render() {
    console.log('Homelng' + this.props.lng);
  // ここでconsole.logすると翻訳済みの本文が確認できる
console.log(this.props.trips);

    let i = 0
    // ここでループすると中身が英語に戻ってしまう
    const contents = this.props.trips.map(val =>
      <li className='index-ul__item' key={i++}>
        <img src={val.picture_urls[0]} className='index-ul__image' />
        <h3>{val.title}</h3>
        <p className='index-ul-icons'>
          {val.description}
        </p>
      </li >
    )

    console.log(contents);

    return (
      <>
        <HeaderComponent props={this.props} />
        <ul>{contents}</ul>
        <FooterComponent />
      </>
    )
  }
}

export default Home;

/sagas/index.js

// import Axios from "axios"
import { call, put, takeLatest, takeEvery } from 'redux-saga/effects'
import * as Api from '../helpers/api'
import * as F2 from '../helpers/functions'

function* getTrips(action) {

  let tempTrips = yield call(Api.fetch)

  const trips = F2.tripTranslate(tempTrips, action.payload.lng)
  // ここでconsole.logすると翻訳済みの本文が確認できる

  yield put({ type: "GET_TRIPS_SUCCESS", trips: trips })
}

// INDEX Action が送出されるたびにfunctionを起動
function* rootSaga() {
  yield takeEvery("GET_TRIPS", getTrips)
  //アクションタイプgettypeが実行された時はredux-sagaで検知して、経由  
}

export default rootSaga;

/reducers/indexReducer.js

const initialState = {
  trips: [],
  lng: 'jp',
  source: '',
}
// Reducer処理
export const indexReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'GET_TRIPS_SUCCESS': {
      return Object.assign({}, state, { 'trips': action.trips })
    }
    case 'LANG_CHANGE': {
      return Object.assign({}, state, action.payload)
    }
    case 'MARKDOWN': {
      return Object.assign({}, state, action.payload)
    }
    default: {
      return state
    }
  }
}

/helpers/functions.js

// google翻訳は jpではなく、 jaで指定する必要があるので注意！！
// use a callback function to setState
export function tripTranslate(array, lng) {
  if (lng === 'jp') { lng = 'ja' }
  console.log('functionsの言語：' + lng);

  array.forEach((element, i) => {
    googleTranslate.translate(element.title, lng, function (err, translation) {
      array[i].title = translation.translatedText
    });
    googleTranslate.translate(element.description, lng, function (err, translation) {
      array[i].description = translation.translatedText
    });
    googleTranslate.translate(element.notes, lng, function (err, translation) {
      array[i].notes = translation.notes
    });
  });
  return array
}

試したこと

問題の切り分けとして、別のstateを更新（GIFは言語設定のstateを jp → enに変更したらなぜか日本語になります）
*クリックしているボタンは言語設定のstateを更新するボタンです。

これくらいしかヒントがなく申し訳ありません。

何らかのstate更新タイミングの問題のような気がしていますが、はっきりしないので、何かお気づきの点があれば教えていただけると助かります。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

node.js : 12.0.4
react: 16.8
redux : 7.1.3
"google-translate": "^3.0.0",

Comments

[FKM]

react のメソッドでreturnを使って値を返してしまうと同期処理が切れてしまった気がします

[退会済みユーザー]

提示されているファイルが一個足りてないことはないでしょうか
Home.jsとは別にredux-sagaのactionとreduxsのstateをHome.jsにマッピングしているファイルがあると思うのですが、そこの内容を見てみたら原因がわかるかもしれません

[uchida_yuma]

みなさまご回答ありがとうございました。

自己解決しました。結論は Redux sagaの yieldで使うメソッドの1つがpromiseを返していなかったため、同期処理が切れているためでした。

Answer 1

Chromeでデバッグしてるのであれば
redux-loggerを使うことをお勧めします。
こちらでactionがdispatchされた後に入ってるstateのデータが変更されているかどうかが分かります。

されていれば、レンダリングまたはconnectでpropsにマッピングした時に問題が起きている。
されていなければdispatchしたペイロードあるいはreducerのactionTypeの不一致などの問題などが起きている可能性があります。

怪しいのは

    googleTranslate.translate(element.title, lng, function (err, translation) {
      array[i].title = translation.translatedText
    });
    googleTranslate.translate(element.description, lng, function (err, translation) {
      array[i].description = translation.translatedText
    });
    googleTranslate.translate(element.notes, lng, function (err, translation) {
      array[i].notes = translation.notes
    });

この辺が同期メソッドであるかを確認してみてください。
this.props.tripsのマッピングについてもうまくいっていない可能性があります。

    const contents = this.props.trips.map(val =>
      <li className='index-ul__item' key={i++}>
        <img src={val.picture_urls[0]} className='index-ul__image' />
        <h3>{val.title}</h3>
        <p className='index-ul-icons'>
          {val.description}
        </p>
      </li >
    )

また、この文ですが、外部のコンポーネントに要素を切り出すことをお勧めします。
毎回変数でコンポーネントを内部で作成して保管するのはパフォーマンス的にもよくありませんし、レンダリングが毎回走るためバグの温床になりやすくなります。