Reactjs 在react js中，多个下拉筛选器不能一起工作

在我的react应用程序中，我有3个下拉菜单，第一个选择一些带有升序和降序选项的属性，第二个按头发颜色过滤，第三个按专业过滤。但是，根据我首先使用的下拉列表，除非我刷新浏览器，否则其他两个将无法工作。使用axios从某处获取数据，下拉菜单是作为回调函数传回的子组件和道具

我想我需要重置其他搜索条件的状态，我已经尝试过了，但没有成功。我还为多个过滤器寻找解决方案，但我似乎无法应用于我的问题

以下是我的组件初始状态：

class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
  data: [],
  imageIsLoaded: false,
  orderBy: "",
  order: "",
  profession: "",
  hairColor: "",
};
this.doOrderBy = this.doOrderBy.bind(this);
this.doOrder = this.doOrder.bind(this);
this.handleColor = this.handleColor.bind(this);
this.handlePro = this.handlePro.bind(this);
}

这是处理程序

doOrderBy(e) {
const newOrderBy = e.target.value;
this.setState({
  orderBy: newOrderBy,
});
 }

doOrder(e) {
const newOrder = e.target.getAttribute("data-value");
this.setState({ order: newOrder });
}

doOrderBy是一个数组[“名称”、“年龄”、“重量”。] 门卫是[“asc”，“desc”]

以下是排序逻辑：

render() {
const {data, imageIsLoaded, hairColor, orderBy, order, profession} 
=this.state;
let sorted = data;

if (order) {
  if (orderBy !== ("number of friends" && "number of professions")) 
   { sorted = _.orderBy(sorted, item => {
        return item[orderBy]}, order);
   } else if (orderBy === "number of friends") {
    sorted = _.orderBy(sorted, item => {
        return item.friends.length},order);
   } else {sorted = _.orderBy(sorted, item => {
       return item.professions.length}, order);
  }
} else if (hairColor) {
sorted = _.filter(sorted, item => _.includes(hairColor, 
item.hair_color));
} else if (profession) {
  sorted = _.filter(sorted, { professions: profession });
} else {
  sorted = data;
}

以下是作为渲染中的组件的下拉菜单：

         <OrderMenu
          doOrder={this.doOrder}
          order={order}
          orderBy={orderBy}
          doOrderBy={this.doOrderBy}
          placeholder="Select by..."
        />

        <HairMenu
          data={data}
          handleHairInput={this.handleColor}
          placeholder="Choose hair color..."
        />

        <ProfessionMenu
          data={data}
          handleInputPro={this.handlePro}
          placeholder="Choose profession..."
        />

---

问题其实很小。您使用了if-else-if块

if (order) { //If this is true the other else ifs will not be executed
  if (orderBy !== ("number of friends" && "number of professions")) 
   { sorted = _.orderBy(sorted, item => {
        return item[orderBy]}, order);
   } else if (orderBy === "number of friends") {
    sorted = _.orderBy(sorted, item => {
        return item.friends.length},order);
   } else {sorted = _.orderBy(sorted, item => {
       return item.professions.length}, order);
  }
} else if (hairColor) { // If the above condition was met this will not be checked
sorted = _.filter(sorted, item => _.includes(hairColor, 
item.hair_color));
} else if (profession) { //If any of the above was true this would not be checked
  sorted = _.filter(sorted, { professions: profession });
} else {
  sorted = data;
}

因此…将if-else-if块转换为单个/独立if块！ 还有，关于算法的小建议太多了，总是在排序之前做过滤

这是固定的逻辑

render() {
  const {
    data,
    imageIsLoaded,
    hairColor,
    orderBy,
    order,
    profession
  } = this.state;

  let sorted = data;

  if (hairColor) {
    sorted = _.filter(sorted, item => _.includes(hairColor,
      item.hair_color));
  }

  if (profession) {
    sorted = _.filter(sorted, {
      professions: profession
    });
  }

  if (order) {
    if (orderBy !== ("number of friends" && "number of professions")) {
      sorted = _.orderBy(sorted, item => {
        return item[orderBy]
      }, order);
    } else if (orderBy === "number of friends") {
      sorted = _.orderBy(sorted, item => {
        return item.friends.length
      }, order);
    } else {
      sorted = _.orderBy(sorted, item => {
        return item.professions.length
      }, order);
    }
  }


}

---

你能分享你正在尝试排序的数据结构吗？还有动物卡组件的代码？嗨，谢谢，我已经更新了更多信息。非常感谢你指出这一点！我还需要分解（否则如果）在第三个区块内。几个月前我刚开始学习网络编程，仍在尝试了解所有这些东西。现在过滤器也可以组合使用。非常感谢您的帮助。下次将更加关注逻辑…请友好地将答案向上投票，并将其标记为已回答，如果它帮助了您！：）y是的，我已经投了赞成票，但我找不到在哪里将其标记为已回答？嗯，你还没有投反对票。答案旁边有一个小勾号将其标记为已回答。我已将其标记为已回答，我也用向上箭头投了赞成票，但一条警告消息说，它只记录但不显示声誉是否低于15，因为我是新的，所以目前只有10个声誉。当我得到15个时，我会回来投票。作为一个初学者，我真的很感谢这里技术界的支持和帮助，谢谢！

import React, { Component, Fragment } from "react";

class AnimalCards extends Component {
render() {
const { sorted } = this.props;
const Jobless = <div>No profession to show</div>;
const NoFriends = <div>No friends to show</div>;
return (
  <Fragment>
    <div className="flip-card-container">
      {sorted.map(animal => {
        return (
          <div className="flip-card" key={animal.id}>
            <div className="flip-card-inner">
              {/* ---------------START front ----------- */}
              <div className="flip-card-front">
                <div
                  className="flip-card-front-top"
                  style={{ backgroundColor: animal.hair_color }}
                />
                <div className="img-container">
                  <img
                    className="img-circle"
                    src={animal.thumbnail}
                    alt={`${animal.name}`}
                    style={{ border: "5px solid white" }}
                  />
                </div>
                <div className="flip-card-front-bottom">
                  <div className="name">{animal.name}</div>
                  <div className="attributes">
                    <div className="age-group">
                      <img
                        className="ageIcon"
                        src={require("../images/axe.png")}
                        alt="ageIcon"
                      />
                      <div className="age">{animal.age + " "} 
      yrs</div>
                    </div>
                    <div className="weight-group">
                      <img
                        className="weightIcon"
                        src={require("../images/weight.png")}
                        alt="weightIcon"
                      />
                      <div className="weight"> {animal.weight} kg 
    </div>
                    </div>
                    <div className="height-group">
                      <img
                        className="ageIcon"
                        src={require("../images/height.png")}
                        alt="heightIcon"
                      />
                      <div className="height">{animal.height} cm 
</div>
                    </div>
                  </div>
                  <div className="professions">
                    Number of professions:
                    <div className="professions-num">
                      {animal.professions.length === 0
                        ? Jobless
                        : animal.professions.length}
                    </div>
                  </div>
                  <div className="friends">Number of friends:</div>
                  <div className="friends-num">
                    {animal.friends.length === 0
                      ? NoFriends
                      : animal.friends.length}
                  </div>
                </div>
              </div>
              {/* ------------START front ----------- */}
              {/* ------------START back ------------- */}
              <div className="flip-card-back">
                <div className="back-container">
                  <div className="back-header">Professions</div>
                  <div className="back-list">
                    {animal.professions.length === 0
                      ? Jobless
                      : animal.professions.join(", ")}
                  </div>
                </div>
                <div className="back-container">
                  <div className="back-header">Friends</div>
                  <div className="back-list">
                    {animal.friends.length === 0
                      ? NoFriends
                      : animal.friends.join(", ")}
                  </div>
                </div>
              </div>
              {/* -------------END back ------------- */}
            </div>
          </div>
        );
      })}
    </div>
  </Fragment>
 );
 }
 }
 export default AnimalCards;

fetchAnimals() {
const apiUrl =
 "https://raw.githubusercontent.com/rrafols/ 
 mobile_test/master/data.json";

 axios.get(apiUrl).then(({ data }) => {
  localStorage.setItem("data", data);
  this.setState({
    data: data.Brastlewark,
    imageIsLoaded: true,
  });
  });
}

componentDidMount() {
this.fetchAnimals();
}

if (order) { //If this is true the other else ifs will not be executed
  if (orderBy !== ("number of friends" && "number of professions")) 
   { sorted = _.orderBy(sorted, item => {
        return item[orderBy]}, order);
   } else if (orderBy === "number of friends") {
    sorted = _.orderBy(sorted, item => {
        return item.friends.length},order);
   } else {sorted = _.orderBy(sorted, item => {
       return item.professions.length}, order);
  }
} else if (hairColor) { // If the above condition was met this will not be checked
sorted = _.filter(sorted, item => _.includes(hairColor, 
item.hair_color));
} else if (profession) { //If any of the above was true this would not be checked
  sorted = _.filter(sorted, { professions: profession });
} else {
  sorted = data;
}

render() {
  const {
    data,
    imageIsLoaded,
    hairColor,
    orderBy,
    order,
    profession
  } = this.state;

  let sorted = data;

  if (hairColor) {
    sorted = _.filter(sorted, item => _.includes(hairColor,
      item.hair_color));
  }

  if (profession) {
    sorted = _.filter(sorted, {
      professions: profession
    });
  }

  if (order) {
    if (orderBy !== ("number of friends" && "number of professions")) {
      sorted = _.orderBy(sorted, item => {
        return item[orderBy]
      }, order);
    } else if (orderBy === "number of friends") {
      sorted = _.orderBy(sorted, item => {
        return item.friends.length
      }, order);
    } else {
      sorted = _.orderBy(sorted, item => {
        return item.professions.length
      }, order);
    }
  }


}