Question

我正在构建表组件。作为道具，它获得了一个名为“内容”的对象，该对象可保存显示为表内容的记录。该组件的状态为“ currentRecord”，其中包含选定行的ID（每行onClick事件的更改）。我想使用“ useState”将第一条记录的ID设置为初始状态。作为“ 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

这可能有效：

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 2

您实际上可以执行惰性初始化以使用函数声明状态。您如何调用该函数而不将其作为参数传递，这意味着您将函数的返回值作为使用状态的初始值进行传递。您可以查看官方说明： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 3

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

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

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

3 个答案: