React 条件渲染 - 为什么此代码不渲染任何内容？

Question

我有一个面板，它应该根据通过道具获得的查询类型呈现选项列表。查询类型被识别为正常，但它应该通过状态映射并呈现元素列表。但它什么也没有呈现。这是为什么？谢谢！

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;
    }
  }
}

Answer 1

我认为您的问题出在 type prop 的声明中：

你明白了：

const { type } = this.props.type;

应该是这样的：

const { type } = this.props;

React 条件渲染 - 为什么此代码不渲染任何内容？

React conditional rendering - Why doesn't this code render anything?

rendering

switch-statement

conditional-statements

reactjs