Question

我有一个子组件，它获取从其父组件传递下来的项目数组。一切都得到正确显示，删除项目也可以。但是，一旦删除了表中的最后一项，就不会显示空状态。只有在我重新加载页面时，才会显示空状态。

我有新的反应，可能还没有完全理解州/道具管理。

有人可以解释一下吗？提前谢谢。

父：

import React from "react";
import { Message } from "semantic-ui-react";
import BasarService from "../../../../services/BasarService";
import BasarTable from "./components/BasarTable/BasarTable";

class Basars extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      basars: []
    };

    this.basarService = new BasarService();
    this.deleteBasar = this.deleteBasar.bind(this);
  }

  deleteBasar(id) {
    this.basarService.delete(id, response => {
      var filteredBasars = this.state.basars.filter(basar => basar.id !== id);
      this.setState({
        basars: filteredBasars
      });

      console.log("Success:", response);
    });
  }

  getBasars() {
    this.basarService.getAll(data => {
      this.setState({
        isLoaded: true,
        basars: data
      });
    });
  }

  componentDidMount() {
    this.getBasars();
  }

  render() {
    const { error, isLoaded, basars } = this.state;

    const ErrorMessage = () => (
      <Message negative>
        <Message.Header>Basars could not be loaded!</Message.Header>
        <p>{error.message}</p>
      </Message>
    );

    if (error) {
      return ErrorMessage();
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <BasarTable basars={basars} deleteBasar={this.deleteBasar} />
      );
    }
  }
}

export default Basars;

子：

import React from "react";
import { Table, Button, Icon } from "semantic-ui-react";
import { formatDate } from "../../../../../../util/timeFormat";

class BasarTable extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(basarId) {
    this.props.deleteBasar(basarId);
  }

  render() {
    const { basars } = this.props;

    const BasarRows = basars => (
      basars.map(basar => (
        <Table.Row key={basar.id}>
          <Table.Cell>{basar.id}</Table.Cell>
          <Table.Cell>{basar.type}</Table.Cell>
          <Table.Cell>{formatDate(basar.startdate)}</Table.Cell>
          <Table.Cell>{formatDate(basar.enddate)}</Table.Cell>
          <Table.Cell>
            <Button icon color="red" onClick={() => this.handleClick(basar.id)}>
              <Icon name="trash" />
            </Button>
          </Table.Cell>
        </Table.Row>
      ))
    );

    const EmptyState = (
      <Table.Row>
        <Table.Cell colSpan="5" textAlign="center">
          <Icon name="frown" />No basars found!
        </Table.Cell>
      </Table.Row>
    );


    return (
      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Type</Table.HeaderCell>
            <Table.HeaderCell>StartDate</Table.HeaderCell>
            <Table.HeaderCell>EndDate</Table.HeaderCell>
            <Table.HeaderCell>Actions</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {basars ? BasarRows(basars) : EmptyState}
        </Table.Body>
      </Table>
    );
  }
}

export default BasarTable;

Answer 1

空数组仍然是一个真理，所以请将子组件中的条件更改为basars.length > 0 ? BasarRows(basars) : EmptyState

Answer 2

你需要记住过滤器函数总是返回新数组（也是空数组）

空状态不会显示

2 个答案: