Как инициализировать состояние функциональной компоненты реагирования из реквизита - PullRequest
Новая
       40

Как инициализировать состояние функциональной компоненты реагирования из реквизита

0 голосов
/ 11 декабря 2019

Я использую перехватчики React для состояния приложения, мне было интересно, как инициализировать состояние функционального компонента с помощью реквизита? Документ о подключении 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 prop и Sym компонент инициализирует состояние с ним, используя this.props.activeSym in constructor. Есть ли обходной путь для достижения того же в функциональном компоненте?

Ответы [ 2 ]

0 голосов
/ 11 декабря 2019

Сначала вы можете определить его из реквизита (если реквизит существует): 

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

И затем вы можете обновить это значение, когда реквизит не имеет значения сразу (при визуализации компонента): 

useEffect(() => {
  if (activeSym) {
    setCount(activeSym);
  }
}, [activeSym])
0 голосов
/ 11 декабря 2019

Просто так: 

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

  return (
     /* ... */
  )
}
...