常連

回答者

ベストアンサー

拍手喝采

自己紹介

有名人

javascriptで関数の配列をreduceで回し、reduceの戻り値を関数にして、
その関数の中で処理をしてから戻すといった関数を作ったのですが、処理の流れが思ったと通りではありませんでした。

コードは以下です。
```javascript
const a = () => 'a'
const b = () => 'b'
const c = () => 'c'
const d = () => 'd'

const array = [ a, b, c, d ]

function func(args) {
  return args.reduce((accum, current, index) => {
    console.log('=====outer===== index: ' + index + ', accum: ' + accum() + ', current: ' + current())
    return (str='*') => {
      console.log('---inner--- index: ' + index + ', accum: ' + accum() + ', current: ' + current())
      return str + accum() + ':' + current()
    }
  })
}

console.log(func(array)('結果: '))
```

結果は以下です。

```shell
=====outer===== index: 1, accum: a, current: b
---inner--- index: 1, accum: a, current: b
=====outer===== index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
---inner--- index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
=====outer===== index: 3, accum: **a:b:c, current: d
---inner--- index: 1, accum: a, current: b
---inner--- index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
---inner--- index: 3, accum: **a:b:c, current: d
---inner--- index: 1, accum: a, current: b
---inner--- index: 2, accum: *a:b, current: c
---inner--- index: 1, accum: a, current: b
結果: **a:b:c:d
```
この結果で理解できないのは、
全体的にどのような処理の流れなのかがわかっていないのですが、
特にreduceの戻り値である関数(inner)の処理が何回もされているのと、
func関数の戻り値の関数を呼び出す際に指定した、引数('結果: ')が最後で適用され、それまではundefinedだということです。
こういったコードを説明している日本語のサイトなどがありましたらそちらを載せていただくだけでもありがたいです。

reduxのcomposeの定義を見ている際に理解できないコードがあったので、似ているコードを作って理解しようと思ったらはまってしまいました。

よろしくお願いします。

javascriptのreduceの戻り値を関数にしたときの処理の流れがわかりません。

なんども本当にすみませんmm

[こちらのご指摘](https://teratail.com/questions/122533)をいただきまして、ようやくmessages自体を表示することはできているのですが、バグが生じておりまして、完全にできていません。。

#### エラー＆困っていること

データベースに入っているデータは表示されたかと思ったのですが...

> エラー内容
```
Warning: rendering invalid section, row: 0, 0
Warning: rendering invalid section, row: 0, 1
Warning: rendering invalid section, row: 0, 2
・・・

ExceptionsManager.js:73 Warning: Encountered two children with the same key, `.1:$r_s1_undefined`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
```

![Fetchされている様子](56a3dfe7a8b5552e84dc009f1fdafef4.png)

2点ほどおかしい点があります。
・同じ内容のmessageデータしか表示できていない
・通常、データベースに入っている数の倍乗のデータが表示されている

setStateしているmessagesに問題があるのでしょうか・・・

#### ソースコード

```JavaScript
class Message extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: `${navigation.state.params.room.user.name}`,
      headerLeft: (
        <TouchableOpacity
          onPress={()=> navigation.goBack()}
          style={styles.headerIcon}
        >
          <Icon name='chevron-left' size={28} style={{color: '#fff'}}/>
        </TouchableOpacity>
      ),
      headerStyle: {
        backgroundColor: Theme.PRIMARY,
      },
      headerTitleStyle: {
        color: '#fff',
        fontWeight: 'bold'
      }
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      messages: [],
    };
  }

  componentWillMount() {
    const room = this.props.navigation.state.params.room;
    this.props.messagesFetch(room);

    this.createDataSource(this.props);
  }

  onSend(message) {
    const room = this.props.navigation.state.params.room;
    this.setState((previousState) => ({
      messages: GiftedChat.append(previousState.messages, message),
    }));

    this.props.sendMessage({
      message,
      room
    })
  }

  componentWillReceiveProps(nextProps) {
    this.createDataSource(nextProps);
  }

  createDataSource({ messages }) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(messages);
    console.log('messages', messages);

    // messagesを置く場所を間違えている？
    this.setState({ messages });
  }

  render() {
    const { currentUser } = firebase.auth();
    return (
      <Screen>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.onSend.bind(this)}
          user={{
            _id: currentUser.uid
          }}
          renderBubble={this.renderBubble}
          renderSend={this.renderSend}
        />
      </Screen>
    );
  }
}
```
上のコンソールログでは下記の結果が返ってきているのですが。。

![コンソールログ結果](61a46b2646f42d7fb7f3ec4a2a54f4e9.png)

ListViewにするのが間違っているのでしょうか？

チャットがちゃんと表示されない（react native）

### 前提・実現したいこと

複数の関数を時間差で実行してそれを繰り返す方法を知りたく思っています。

#####実行内容
console.logで下記を表示

> （1秒後）コーヒーを注文する→（2秒後）支払いをする→（5秒後）飲む→（1秒後）コーヒーを注文する
> →（2秒後）支払いをする→（5秒後）飲む・・・エンドレスにこの処理

※本当はもっと色々な処理をさせたいのですが質問しやすいようにシンプルにしました。

検索しているとこのような処理に「Promise」を使用することをすすめている記事が多く、ひとまず自分なりに記述をしてみました。
ただ、これを繰り返し実行する方法がわからずにいます。


###知りたいこと

- 表題の「時間差で実行、さらに繰り返し」処理を行うにはどのような記述を行うのが良いのか
- `Promise`で処理をする選択は良いのか？その場合繰り返しをさせるにはどのように記述するべきか
- そもそも私の`Promise`の記述に誤りが無いか、もしくはもっと良い記述があればご指摘いただけると助かります

```JavaScript
function orderCoffee() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('コーヒーを注文する');
			resolve();
		}, 1000);
	});
}
function payBill() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('支払いをする');
			resolve();
		}, 2000);
	});
}
function drinkCoffee() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('飲む');
			resolve();
		}, 5000);
	});
}

//下記を繰り返し実行させたい
orderCoffee()
	.then(payBill)
	.then(drinkCoffee)
```

どうぞ宜しくお願いします