Реагируйте на условный рендеринг. Почему этот код ничего не отображает? - PullRequest
Новая
       37

Реагируйте на условный рендеринг. Почему этот код ничего не отображает?

0 голосов
/ 08 апреля 2020

У меня есть панель, которая должна отображать список параметров в зависимости от типа запроса, который он получает через реквизит. Тип запроса распознается нормально, но затем он должен отобразить состояние и отобразить список элементов. Но это ничего не делает вообще. Это почему? Спасибо! 

export default class SortSearchFilterPanel extends Component {
  constructor(props) {
    super(props);
    this.type = this.props.type;
    this.state = {
      sortList: [
        "What's New",
        "Name A-Z",
        "Name Z-A",
        "ABV Low To High",
        "ABV High To Low",
        "Price Low To High",
        "Price High To Low"
      ],
      filterList: ["Filter By Name", "Filter By Price"]
    };
  }

  render() {
    const { type } = this.props.type;
    const { sortList, filterList } = this.state;
    switch (type) {
      case "search":
        return (
          <div className="PanelGrid">
            <input type="text" name="serch" placeholder="Search..." />
          </div>
        );
        break;
      case "sort":
        return (
          <div className="PanelGrid">
            <ul className="PanelList">{sortList.map(item => <li key={item}>item</li>)}
            </ul>
          </div>
        );
        break;
      case "filter":
        return (
          <div className="PanelGrid">
            <ul className="PanelList">
              {filterList.map(item => <li key={item}>item</li>)}
            </ul>
          </div>
        );
        break;
      default:
        return null;
        break;
    }
  }
}

1 Ответ

1 голос
/ 08 апреля 2020

Я считаю, что ваша проблема в объявлении типа prop:

Вы получите это: 

const { type } = this.props.type;

Это должно быть так: 

const { type } = this.props;
...