TIL stateを使用する際の注意(配列、オブジェクト)

5583 ワード
テキストリンク
stateの使用上の注意
クラス構成部品でも関数構成部品でもstateを使用する場合は注意してください.
state値を変更する必要がある場合は、setStateまたはusStateで渡されるsetter関数を使用する必要があります.
const [object, setObject] = useState({a: 1. b:1});
object.b = 2;
これは間違ったコードです.配列やオブジェクトを更新する必要がある場合は、どうすればいいですか?
この場合、配列またはオブジェクトのコピーを作成し、コピーで値を更新できます.
コピーのステータスはsetStateまたはsetter関数で更新されます.


import React, { useState } from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({name,numnum,children}) => {


    // const nextObject = {...object, b: 2} // 사본을 만들어서 b 값만 덮어 쓰기.

    const [object, setObject] = useState({a:1, b:2, c:3});

const test = () => {
setObject({
    ...object,
    b:88
    }
);
console.log(object)

}
    return <div>안녕하세요, {name} 입니다.
    <br/>
    children 값은 {children}
    좋아하는 건 {numnum}
    <button onClick={()=>{test()}}/>
    </div>

}

MyComponent.defaultProps = {
    name:'기본'
};

MyComponent.propTypes = {
    name : PropTypes.string,
    numnum : PropTypes.string.isRequired

};

export default MyComponent;
Join, SQL Programming
白駿2015号:獣の和4-SWIFT