web-dev-qa-db-ja.com

小道具から反応機能コンポーネントの状態を初期化する方法

Reactアプリの状態のフックを使用していますが、propsを使用して機能コンポーネントの状態を初期化する方法について疑問に思いましたか？useStateフックのドキュメントでは、

const [count, setCount] = useState(0);

コンポーネントに渡される小道具の値によってその0値を初期化したいと思います。古いものとして、

import React from 'react';

export default class Sym extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            sym : [0,3,2,8,5,4,1,6],
            active: this.props.activeSym
        }
        this.setActive = this.setActive.bind(this);
    }

    setActive(itemIndex){
        this.setState({
            active: itemIndex
        });
    }

    render(){
        return (
             <div><h1>{ this.state.sym[this.state.active]}</h1></div>
        );
    }
}

正常に動作します。親コンポーネントがactiveSymプロパティを渡し、Symコンポーネントがconstructorのthis.props.activeSymを使用して状態を初期化する場合。関数コンポーネントで同じことを達成するための回避策はありますか？

reactjsinitializationstatereact-hooksprop
2
Kiran Maniya

まず、プロップからそれを定義できます（プロップが存在する場合）。

const [count, setCount] = useState(activeSym);

そして、propがすぐに値を持たない場合（コンポーネントがレンダリングされる場合）は、この値を更新できます。

useEffect(() => {
  if (activeSym) {
    setCount(activeSym);
  }
}, [activeSym])
1
demkovych

次のように：

const MyFunctionalComponent = ({myProp}) => {
  const [count, setCount] = useState(myProp)

  return (
     /* ... */
  )
}
0
Emmanuel Meric de Bellefon