Reactを使用した状態の配列とオブジェクトの操作

すべてのアプリの中心には、その状態があります。使用するテクノロジーの種類に関係なく、アプリは、メモリ内、物理ディスクなど、ある種の状態に依存します。Reactでは、すべてのコンポーネントが独自の状態を処理できます。つまり、ボタンをクリックしたり、テキスト入力のコンテンツを処理したりできます。これらのコンポーネントは主にスマートコンポーネントと呼ばれ、状態を処理しないコンポーネントはダムコンポーネントと呼ばれます。このガイドでは、オブジェクトと配列を使用して状態を操作する方法を学習します。しっかり座って！

クラスコンポーネントの状態

Reactコンポーネントは、コンストラクター関数で処理される状態を持つES6クラスとして記述できます。

以下のスニペットを検討してください。<MyComponent/>コンポーネントがレンダリングされる前に呼び出されるコンストラクター関数に状態オブジェクトがあります。状態オブジェクトが変更されるたびに、Reactはでrenderメソッドを呼び出します<MyComponent/>。

import React from 'react'

class MyComponent extends React.Component {
	constructor(props){
		super(props);
		this.state = { date: new Date(), name: 'Kofi'};	
	}

	render(){
		return(
			<div>
						<p> Hello {this.state.name} , it is {this.state.toLocaleTimeString()
						<p>Date: {this.state.date.toLocaleDateString()}
			</div>
		)
	}
}

機能コンポーネント（フック）の状態

React 16.8にフックが導入されたことで、機能コンポーネントも簡略化された方法で状態を処理できるようになりました。以下のスニペットは、MyComponent/>機能コンポーネントとして記述されたクラスベースの<です。useStateフックは、（空であってもよい）、パラメータとしてデフォルト値を取り込み、状態、それを更新する機能を含む配列を返す関数です。配列の破棄は、useState関数呼び出しの結果から値を抽出するために使用されます。

import React, {useState} from 'react';

function MyComponent(){

	const [date, setDate] = useState(new Date())
	const [name, setName] = useState("Kofi");

	return(
			<div>
						<p> Hello {date.name} , it is {date.toLocaleTimeString()
						<p>Date: {date.toLocaleDateString()}
						<button onClick={setDate(new Date())}></button>
			</div>
	)
}

配列の操作

ReactアプリをAPIと統合する場合は、API呼び出しから取得した値を、配列に含まれていた以前の値を失うことなく、状態の配列に格納することをお勧めします。スプレッド演算子は、それを簡単に行うのに役立ちます。以下のスニペットをよく見てください。このスニペットfinalArrayは、の内容を「拡散」することによって拡散演算子を実装していoldArrayます。

const oldArray = ['peter piper', 'picked a pair']

const finalArray = [...oldArray, 'of pickle pepper']

console.log(finalArray)

// (3) ["peter piper", "picked a pair", "of pickle pepper"]

以下に示すように、フックを使用すると、それを状態配列に簡単に適用できます。値を使用して、map関数を使用して段落タグのリストをレンダリングできるようになりました。

import React, { useState, useEffect } from 'react';

const ProductsPage = () => {
  const [productsList, setProductsList] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    fetch('http://127.0.0.1:8000/api/v1/products/all')
      .then((res) => res.json())
      .then((data) => setProductsList([...data]))
      .then(setisLoading(false));
  }, []);

	return (
    <>
      <Header />
      {isLoading ? (
        <div className='spinner-border text-primary' role='status'>
          {' '}
          <span className='sr-only'>Loading...</span>{' '}
        </div>
      ) : (
				productsList.map(product => {
							<p key={product.id}>{product.name}</p>
				})
      )}
    </>
  );
};

}

オブジェクトの操作

上記のコードスニペットと同様に、オブジェクトもスプレッド操作をサポートしています。オブジェクトスプレッドを使用して同じコードを実装しましょう。

import React, { useState, useEffect } from 'react';

const ProductsPage = () => {
  const [productsList, setProductsList] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    fetch('http://127.0.0.1:8000/api/v1/products/all')
      .then((res) => res.json())
      .then((data) => setProductsList({...data}))
      .then(setisLoading(false));
  }, []);

	return (
    <>
      <Header />
      {isLoading ? (
        <div className='spinner-border text-primary' role='status'>
          {' '}
          <span className='sr-only'>Loading...</span>{' '}
        </div>
      ) : (
				Object.keys(productList).map(product => {
							<p key={productList[product].id}>{productList[product].name}</p>
				})
      )}
    </>
  );
};

}

結論

以上です。オブジェクトと配列を使用した状態管理の技術をうまく学習しました。州関連の問題への取り組みは、今やあなたにとって簡単なはずです。このトピックについてもっとチャットしたい場合は、Twitter @ DesmondNyamadorで私にpingしてください。

リンク: https://www.pluralsight.com/guides/manipulating-arrays-and-objects-in-state-with-react

#reactjs

What is GEEK

Buddha Community

Reactを使用した状態の配列とオブジェクトの操作

クラスコンポーネントの状態

Reactコンポーネントは、コンストラクター関数で処理される状態を持つES6クラスとして記述できます。

import React from 'react' class MyComponent extends React.Component { constructor(props){ super(props); this.state = { date: new Date(), name: 'Kofi'}; } render(){ return( <div> <p> Hello {this.state.name} , it is {this.state.toLocaleTimeString() <p>Date: {this.state.date.toLocaleDateString()} </div> ) } }

機能コンポーネント（フック）の状態

import React, {useState} from 'react'; function MyComponent(){ const [date, setDate] = useState(new Date()) const [name, setName] = useState("Kofi"); return( <div> <p> Hello {date.name} , it is {date.toLocaleTimeString() <p>Date: {date.toLocaleDateString()} <button onClick={setDate(new Date())}></button> </div> ) }

配列の操作

const oldArray = ['peter piper', 'picked a pair'] const finalArray = [...oldArray, 'of pickle pepper'] console.log(finalArray) // (3) ["peter piper", "picked a pair", "of pickle pepper"]

import React, { useState, useEffect } from 'react'; const ProductsPage = () => { const [productsList, setProductsList] = useState([]); const [isLoading, setisLoading] = useState(true); useEffect(() => { fetch('http://127.0.0.1:8000/api/v1/products/all') .then((res) => res.json()) .then((data) => setProductsList([...data])) .then(setisLoading(false)); }, []); return ( <> <Header /> {isLoading ? ( <div className='spinner-border text-primary' role='status'> {' '} <span className='sr-only'>Loading...</span>{' '} </div> ) : ( productsList.map(product => { <p key={product.id}>{product.name}</p> }) )} </> ); }; }

オブジェクトの操作

import React, { useState, useEffect } from 'react'; const ProductsPage = () => { const [productsList, setProductsList] = useState([]); const [isLoading, setisLoading] = useState(true); useEffect(() => { fetch('http://127.0.0.1:8000/api/v1/products/all') .then((res) => res.json()) .then((data) => setProductsList({...data})) .then(setisLoading(false)); }, []); return ( <> <Header /> {isLoading ? ( <div className='spinner-border text-primary' role='status'> {' '} <span className='sr-only'>Loading...</span>{' '} </div> ) : ( Object.keys(productList).map(product => { <p key={productList[product].id}>{productList[product].name}</p> }) )} </> ); }; }

結論