Question

我正在尝试映射从父组件获得的数组，但是问题是，即使我将数据分配给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来做到这一点。 / p>

const App = () => {
  ...

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

无法在道具反应时设置状态

1 个答案: