web-dev-qa-db-fra.com

Comment initialiser l'état du composant fonctionnel réactif des accessoires

J'utilise React hameçons pour l'état de l'application, je me suis demandé comment initialiser l'état du composant fonctionnel à l'aide des accessoires? Le Doc de useState crochet dit quelque chose de définitif comme,

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

Je souhaite initialiser que la valeur des accessoires est transmise au composant. Les plus âgés que,

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>
        );
    }
}

fonctionne bien. Où le composant parent passe activeSym prop et Sym composant initialise l'état avec celui-ci en utilisant this.props.activeSym dans constructor. Y a-t-il une solution de contournement pour atteindre la même composante de fonction?

reactjsinitializationstatereact-hooksprop
4
Kiran Maniya

Vous pouvez d'abord le définir des accessoires (si le repère existe):

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

Et puis vous pouvez mettre à jour cette valeur lorsque vous n'avez pas de valeur immédiatement (lorsque le composant rendu):

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

Tout comme suit:

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

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

Oui, cela peut être possible avec un composant fonctionnel aussi! Il vous suffit d'ajouter useEffect _ pour écouter la modification de ProP pour l'initialisation de l'état avec la valeur de soutenir

export const newComponent = (props) => {
  const { path, value, info, update } = props;
  const [val, setVal] = useState(value);

  useEffect(() => {
    setVal(value);
  }, [value]);

  return <div>{val}</div>;
};

Lien de bac à sandbox attachaing

https://codesandbox.io/s/confident-agnesi-ohkq7?file=/src/makecomponent.js

0
Riddhi Patel