1
votes

Comment définir l'état initial dans 'useState' à l'aide d'une fonction?

Je construis un composant de table. Il obtient comme accessoire un objet appelé content qui contient des enregistrements affichés en tant que contenu de la table. Le composant a un état appelé 'currentRecord' qui contient l'id de la ligne sélectionnée (changements dans l'événement onClick sur chaque ligne). Je veux définir l'id du premier enregistrement comme étant l'état initial en utilisant le 'useState'. En tant qu'argument d'état initial pour 'useState', il a une fonction qui renvoie la clé (qui est l'id) du premier enregistrement dans la propriété de contenu. Mais il renvoie undefined. Lorsque la console enregistre la valeur de retour de cette fonction, elle renvoie un identifiant. Pourquoi renvoie-t-il undefined lors de la définition de l'état initial à l'aide d'une fonction?

J'ai essayé de définir l'état initial en utilisant une chaîne au lieu d'une fonction, et cela a fonctionné.

function getFirstOrderId(content:object): string {
    return Object.keys(content)[0];
}

const Table: FunctionComponent<Props> = props => {
  const { columnTitles, content, onRowClick } = props;
  const [currentRecord, setCurrentRecord] = useState(getFirstOrderId(content));
  useEffect(() => {
    onRowClick(currentRecord);
  }, [currentRecord]);
  return (
    <StyledTable>
      <thead>
        <tr>
          {Object.values(columnTitles).map(fieldName => {
            return <th>{fieldName}</th>;
          })}
        </tr>
      </thead>
      <StyledTBody>
        {mapWithKeys((order: any, id: string) => {
          return (
            <StyledRow
              key={id}
              isSelected={id === currentRecord}
              onClick={() => setCurrentRecord(id)}
              onDoubleClick={() => window.open("/" + order)}
            >
              {Object.keys(columnTitles).map(fieldContent => {
                return <td>{order[fieldContent]}</td>;
              })}
            </StyledRow>
          );
        }, content)}
      </StyledTBody>
    </StyledTable>
  );
};

export default Table;

reactjs typescript react-hooks redux

4 commentaires

Avez-vous vérifié que vous obtenez des données dans la variable content avant d'appeler la fonction getFirstOrderId?

Oui. J'ai consigné la valeur de retour de la fonction juste avant la ligne «useState» et elle a renvoyé un identifiant.

@LiorEhrlich, pourriez-vous fournir un violon avec le comportement que vous décrivez? Cela semble vraiment être un problème avec les données de votre accessoire content .

Je n'arrive pas à reproduire ceci: stackblitz.com/edit/react -ts-tfam2h? file = index.tsx - qu'est-ce que

3 Réponses :

0
votes

Cela peut fonctionner:

const [currentRecord, setCurrentRecord] = useState(null);

useEffect(()=>{ // This will run after 1st render

  setCurrentRecord(getFirstOrderId(content)); // OPTION 1
  setCurrentRecord(()=>{                      // OPTION 2
    return getFirstOrderId(content);
  });

},[]);

Vous pouvez configurer un état de chargement pour attendre que useEffect () ait lieu.

0 commentaires

0
votes

Vous pouvez en fait faire une initialisation paresseuse pour un état avec une fonction. Cependant, vous avez appelé la fonction et ne l'avez pas transmise en tant que paramètre, ce qui signifie que vous avez passé la valeur renvoyée de la fonction comme valeur initiale à utiliser state. Vous pouvez consulter l'explication officielle: https://developer.mozilla.org/ fr-FR / docs / Web / JavaScript / Reference / Global_Objects / Promise / all

0 commentaires

-1
votes

Mettez une fonction dans le hook useState et renvoyez la valeur.

const [value, setValue] = useState(() => ({key: "Param"}));
console.log(value) // output >> {key: "Param"}

0 commentaires