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

Question

我正在构建一个表组件。它作为一个称为"内容"的对象，该对象保存显示为表格的记录。该组件具有称为" CurrentRecord"的状态，该状态保留所选行的ID(每行上的OnClick事件更改(。我想将第一个记录的ID设置为使用" usestate"的初始状态。作为" usestate"的初始状态参数，它具有一个函数，该函数返回内容道具中第一个记录的键(ID(。但是它返回不确定。当控制台记录该函数的返回值时，它返回ID。为什么使用函数设置初始状态时返回未定义？

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

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

在usestate挂钩中放置一个函数并返回值。

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

Answer 2

这可能有效：

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()进行。

Answer 3

您实际上可以用函数进行懒惰的初始化。无论您如何称呼该函数而不是作为参数传递，这意味着您将函数的返回值作为使用状态的初始值。您可以查看官方说明：https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/promise/promise/all