React Nativeで、スプレッド構文を復習する

スプレッド構文とは何だっけ?という方(自分)に対して、Reac Nativeでオブジェクトを扱う場合について調べてみます。

この辺からはより理解を深めるため説明を加えることで自分の学習とします。

オブジェクトとは、下記のような形式のものをいいます。

{ name: "tarou",

     age: 23,

     sex: "male", }

次のように変数に入れることもできます。

const obj = {

     name: "tarou",

     age: 23,

     sex: "male",

}；

当然、オブジェクト内でも変数は使用可です。

const obj = {

     name: name,

     age: age,

     sex: sex

}；

このような場合は、下記のように書けます。

const obj = { name, age, sex } ;

（演習）

Reactでは、オブジェクトの配列を扱うことが多いようですので、それについて下記をやっていきます。

『Change』ボタンを押せば、コンソールにobjの内容が表示されるようにしてます。

1．修正・追加

import { StatusBar } from 'expo-status-bar';

import { useEffect } from 'react';

import { StyleSheet, Text, View, Button } from 'react-native';

import { useState } from 'react';

export default function App() {

  const [obj, setObj] = useState({name: "", age: 0});

  const handleObj =() =>{

    setObj({...obj, name:"tarou",age:23});

    console.log(obj);

  }

  return (

    <View style={styles.container}>

      <Text>Open up App.js to start working on your app!</Text>

      <Button

        title="Change"

        onPress={handleObj}

      />

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

※なぜか、コンソール出力は一回遅れるので、その場合はもう一回ボタンをおしてください。

このように、React でのuseStateを使用するときは、スプレッド構文が必ず必要になります。

cf.【JavaScript】オブジェクトの配列を操作するときの基礎チュートリアル - Qiita

React やReact Nativeでは、オブジェクトの配列というものをよく使います。

[React] useStateをどう使うか(配列、オブジェクト) - Qiita

まず、Reactなどでは、変数がすべて、Stateではありません。配列を入れた変数を定義し、それをpush（）などで変更し、それを最終的に、useState（）で定義した、set～（）メソッドを用いて、Stateにほおりこむことができます。

※残余構文とは？