【react-redux】Storeの情報を要素ごとに分けて表示したいが、まとめて表示される。

Question

実装していること

ReactNativeのFunctionでゴミアプリを制作しています。

CheckBoxでチェックをした項目の情報を出力する設定を以下のように書きました。

CheckBoxをチェックすると、
Storeに情報が渡され、
HomeScreenで出力される設定を実装しました。

＜CheckBoxの項目＞
・燃えるゴミ
・容器包装プラスティック

実現したいこと

要素として、渡される情報ごとに分けて出力したいのです。

理想は、「燃えるゴミ」、「容器包装プラスチック」ですが、
現在は、「燃えるゴミ容器包装プラスチック」と出力されます。

最終的には、
「燃えるゴミ」がON、「容器包装プラスチック」がOFFのとき、、
のように４パターンに場合分けして通知を変えたいです。

おそらく、以下のUseSelectorの渡し方に問題があると思っています。
初心者で申し訳ないですが、教えていただきたいです！

HomeScreen 一部抜粋

export default function HomeScreen() {
const user = useSelector(state => state.user);
const {reminders} = user;

  return (
      <FlatList
        style={styles.FlatList}
        data={[{ title: reminders, key: 'item1' }]}
        renderItem={({ item, index, separators }) => (
            <View>
              <Text>{item.title}</Text>
            </View>
        )}
      />
    </View>
  );
}

React Native Debuggerの表示

以下の表示のように、reminders の中に、0(pin),1(pin),2(pin)と分かれています。
それぞれで出力できるようにしたいです。

Answer 1

reminders[0]の空配列[]は不要なのではないでしょうか？
remindersに値を設定する処理が提示されてないので、その点は直していただくとして・・・

以下、remindersは["燃えるゴミ","容器包装プラスチック"]という配列になっている想定です。

data={[{ title: reminders, key: 'item1' }]}

ここが原因だと思います。
titleにremindersの配列ごと入れてしまっているため、remindersを{title, key}という2要素のオブジェクトの配列に変換して直接dataに渡した方がいいです。

const data = reminders.map((r,i) => { return {title: r, key: `item${i}`} });
// ...略
data={data}

Comments

[ok09]

ありがとうございます。
ずっと悩んでいたものが一瞬で解決！
即回答、大変感謝しています！！