reactjs - 如何使用函数在 'useState' 中设置初始状态？

Question

我正在构建一个表组件。它获取一个名为 content 的对象作为 Prop ，该对象保存显示为表格内容的记录。该组件有一个名为“currentRecord”的状态，它保存所选行的 id(每行 onClick 事件的变化)。
我想使用“useState”将第一条记录的 id 设置为初始状态。
作为“useState”的初始状态参数，它有一个函数，该函数返回内容 Prop 中第一条记录的键(即 id)。但它返回未定义。当控制台记录该函数的返回值时，它返回一个 id。
为什么在使用函数设置初始状态时返回 undefined？

我尝试使用字符串而不是函数来设置初始状态，并且它起作用了。

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;

Answer 1

这可能有效:

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()发生。