Как установить начальное состояние в «useState» с помощью функции? - PullRequest
Новая
       19

Как установить начальное состояние в «useState» с помощью функции?

1 голос
/ 01 мая 2019

Я строю компонент таблицы.Он получает в качестве объекта объект, называемый контентом, который содержит записи, которые отображаются как содержимое таблицы.Компонент имеет состояние под названием «currentRecord», в котором хранится идентификатор выбранной строки (изменения в событии onClick для каждой строки).Я хочу установить идентификатор первой записи, чтобы быть начальным состоянием, используя 'useState'.В качестве аргумента начального состояния для 'useState' у него есть функция, которая возвращает ключ (который является идентификатором) первой записи в пропозиции контента.Но он возвращает неопределенное.Когда консоль регистрирует возвращаемое значение этой функции, она возвращает идентификатор.Почему он возвращает неопределенное значение при установке начального состояния с помощью функции?

Я попытался установить начальное состояние с помощью строки вместо функции, и это сработало. 

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;

1 Ответ

0 голосов
/ 02 мая 2019

Это может сработать: 

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

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

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

},[]);

Вы можете установить состояние loading, чтобы дождаться, когда произойдет useEffect().

...