reactjs - Làm thế nào để thiết lập trạng thái ban đầu trong 'useState' bằng cách sử dụng một hàm?

Tôi đang xây dựng một component bảng. Nó nhận một prop là một đối tượng gọi là content, chứa các bản ghi được hiển thị như nội dung của bảng. Component có một state gọi là 'currentRecord' giữ id của hàng được chọn (thay đổi trong một sự kiện onClick trên mỗi hàng). Tôi muốn đặt id của bản ghi đầu tiên làm state ban đầu sử dụng 'useState'. Làm đối số state ban đầu cho 'useState', nó có một hàm trả về key (là id) của bản ghi đầu tiên trong prop content. Nhưng nó trả về undefined. Khi console log giá trị trả về của hàm đó, nó trả về một id. Tại sao nó lại trả về undefined khi đặt state ban đầu bằng cách dùng một hàm?

Tôi đã thử thiết lập trạng thái ban đầu bằng cách sử dụng một chuỗi thay vì một hàm, và nó đã hoạt động.

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;

Câu trả lời #1

Đặt một hàm bên trong hook useState và trả về giá trị.

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

Câu trả lời số 2

Điều này có thể hiệu quả:

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

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

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

},[]);

Bạn có thể thiết lập trạng thái loading để chờ useEffect() thực hiện.