React でネストされた状態のプロパティを更新する

Oluwafisayo Oluwatayo 2023年1月30日

React React Component

React の setState() 関数
React でネストされた状態のプロパティを更新する
まとめ

React でコンポーネントの初期状態を更新しようとすると、ユーザーからのアクションまたはシステムイベントに応じてその初期状態を変更する必要があることを意味します。

初期状態が変更または更新されると、ブラウザに表示される情報も変更されます。これは、React が更新されたコードでコンポーネントを再度レンダリングするためです。

setState() 関数は、コンポーネントのネストされた状態を更新できる主要な React 関数です。

React の `setState()` 関数

コンポーネントの初期状態を設定した後、ReactsetState() は新しい状態を初期化するために呼び出される関数です。ユーザーがイベントをトリガーする必要があるため、setState() と一緒に onClick 関数を適用して、ユーザーが実行したアクションをリッスンし、更新された状態コンポーネントをレンダリングします。

React でネストされた状態のプロパティを更新する

次に、ネストされたコンポーネントの初期状態を更新する方法を示すさまざまな例を見ていきます。

単一の属性を更新する

この例では、setState() メソッドを使用して初期状態コンポーネントを更新し、配列に存在する単一のエントリを更新します。

コードスニペット（App.js）：

import React, { Component } from 'react'
class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {greeting :
        'Click the button to receive greetings'}

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
updateState(){
    // Changing state
    this.setState({greeting :
        'Welcome!!!'})
}
render(){
    return (
    <div>
        <h2>Greetings Portal</h2>
        <p>{this.state.greeting}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

出力：

単一の属性を更新する

コンポーネントの初期状態を設定した後、最初に greeting キーワードを updateState 関数にバインドして、React がコンポーネントで検索して変更するキーワードを認識できるようにする必要があります。

次に、setState 関数を使用して、greeting キーワードが返すデータをコード化します。

最後に、onClick イベントリスナーを updateState 関数とともに使用して、ユーザーが Click me!を押したときに使用します。ボタンをクリックすると、ブラウザの情報が変更および更新されます。

複数の属性を更新する

この例は、前の例に非常によく似ています。ただし、ここでは、コンポーネント状態の複数のエントリを処理しています。

コードスニペット（App.js）：

import React, { Component } from 'react'
class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {
    test: "Nil",
    questions: "0",
    students: "0"
    }

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
updateState(){
    // Changing state
    this.setState({
        test: 'Programming Quiz',
        questions: '10',
        students: '30'
    })
}
render(){
    return (
    <div>
        <h2>Test Portal</h2>
        <p>{this.state.test}</p>

        <p>{this.state.questions}</p>

        <p>{this.state.students}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
)
}
}
export default App;

出力：

複数の属性を更新する

最初の状態を設定した後、this.state キーワードをバインドします。その後、配列内の要素の状態の更新に進みます。

複数の要素を扱っているため、各アイテムを段落要素に入れて、Web ページにレンダリングするときにリストのように表示します。

小道具を使用して状態を更新する

この例では、小道具を使用して初期状態を更新しています。小道具はプロパティの短い単語です。

この方法は、配列内の複数のアイテムや複雑な形式のデータを含むタスクを処理するのに理想的であり、状態を簡単に更新するのに役立ちます。

上記の例のように、App.js でコーディングを行っています。

コードスニペット（App.js）：

import React, { Component } from 'react'
class App extends Component {
static defaultProps = {
    testTopics : [
        'React JS', 'Node JS', 'Compound components',
        'Lifecycle Methods', 'Event Handlers',
        'Router', 'React Hooks', 'Redux',
        'Context'
    ]
}

constructor(props){
    super(props)

    // Set initial state
    this.state = {
    testName: "React js Test",
    topics: ''
    }

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
listOfTopics(){
    return (
    <ul>
        {this.props.testTopics.map(topic => (
            <li>{topic}</li>
        ))}
    </ul>
    )
}

updateState(){
    // Changing state
    this.setState({
    testName: 'Test topics are:',
    topics: this.listOfTopics()
    })
}
render(){
    return (
    <div>
        <h2>Test Information</h2>
        <p>{this.state.testName}</p>
        <p>{this.state.topics}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

出力：

小道具を使用して更新状態を反応させる

まず、testTopics 配列に複数のデータを渡します。次に、データの初期状態を testName 配列に設定します。

testName キーワードを updateState にバインドした後、testTopics 配列内のアイテムを topic の状態のリストとして返す listOfTopics 関数を作成します。

次に、onClick イベントリスナーと一緒に setState() 関数を使用します。たとえば、Click me!ボタンを押すと、初期状態の React js Test の代わりにアイテムのリストが表示されます。

以前の値で状態を更新

これは、初期値を大きくしたい数値例です。この場合、変更ではなく初期状態を増やしたいと思います。

初期状態を上げたいので、useState() 関数内のパラメーターとして prevState を渡し、矢印関数で useState() を使用します。

コードスニペット（App.js）：

import React, { Component } from 'react'

class App extends Component {

    constructor(props){
        super(props)

        // Set initial state
        this.state = {
            count: 0
        }

        // Binding this keyword
        this.updateState = this.updateState.bind(this)
    }

    updateState(){
        // Changing state
        this.setState((prevState) => {
            return { count: prevState.count + 1}
        })
    }

    render(){
        return (
            <div>
                <h2>Click Counter</h2>
                <p>You have clicked me {this.state.count} times.</p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        )
    }
}

export default App;

出力：

更新状態を以前の値に反応させる

setState 関数内で prevState を呼び出し、ボタンがクリックされたときに、データが最後にあった状態を認識し、その状態を 1 増やします。これは、return 配列でカウントを増やすように設定したためです。

まとめ

React でコンポーネントの状態を更新するには、さまざまな用途があります。しかし、これまでに説明した例では、コーダーはどのような状況でもさまざまなユースケースを適用できるはずです。

著者： Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

React の setState() 関数

React でネストされた状態のプロパティを更新する

単一の属性を更新する

複数の属性を更新する

小道具を使用して状態を更新する

以前の値で状態を更新

まとめ

関連記事 - React Component

React の `setState()` 関数