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

我相信你的问题出在类型 prop 的声明中：

你有这个：

const { type } = this.props.type;

应该是这样的：

const { type } = this.props;