无法在反应中使用道具设置 state

Question

我正在尝试通过从父组件获得的数组对 map 进行处理，但问题是，即使我将数据分配给 state，在初始加载时 state 也是空的，结果我的数组为空。 我需要 state 中的这个数组，因为我将在我的项目中实现排序功能，并且我想在用户单击相应单元格时更改userData 。 这是我的代码：

import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import Moment from 'react-moment';
const UserTable = ({ repoData }) => {
    const [userData, setUserData] = useState(repoData);
    console.log(repoData)

    const descending = [].concat(repoData)
        .sort((a, b) => a.name < b.name ? 1 : -1);

    const ascending = [].concat(repoData)
        .sort((a, b) => a.name > b.name ? 1 : -1);

    function clickHandler() {
        setUserData(descending)
    }
    return (
        <div>
            <Table sortable celled fixed>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell
                            onClick={clickHandler}
                        >
                            Repository Name
        </Table.HeaderCell>
                        <Table.HeaderCell

                        >
                            Description
        </Table.HeaderCell>
                        <Table.HeaderCell

                        >
                            Created At
        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {userData.map(repos => {
                        return <Table.Row>

                            <Table.Cell>{repos.name}</Table.Cell>
                            <Table.Cell>{repos.description}</Table.Cell>
                            <Table.Cell> <Moment format="DD-MM-YYYY">{repos.created_at}</Moment></Table.Cell>
                        </Table.Row>
                    })}


                </Table.Body>
            </Table>
        </div>
    );
}

export default UserTable;

Answer 1

由于第一个日志是空的，这意味着父组件将一个空数组传递给UserTable 。

如果您不希望UserTable在repoData仍然为空时显示，您可以在父级别通过检查repoData是否已定义并且长度 > 0 来执行此操作。

const App = () => {
  ...

  return (
      <>
          ...
          {repoData && repoData.length ? <UserTable repoData={repoData} /> : null (or something else)}
          ...
      </>
  )
}