Функция поиска/фильтра Reactjs

Я попытался реализовать функцию поиска/фильтрации в приложении reactjs. Пользователь может искать что угодно, и объект должен возвращаться в зависимости от значения поиска. Логика поиска реализована в handleChange. Может ли кто-нибудь дать мне знать, где я сделал ошибку?

Он не возвращает никаких ошибок. Просто погас экран

Доставка.tsx

export class Shipment extends Component<object, ListInterface> {
  constructor(props: any) {
    super(props);
    this.state = {
      list: [] as any[],
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.getShipmentList();
  }

  componentWillReceiveProps(nextProps: any) {
    this.setState({
      list: nextProps.list
    });
  }

  getShipmentList() {
    axios.get('http://localhost:3001/shipments').then((res: any) => {
      this.setState({ list: res.data });
    });
  }

  handleChange(e: any) {
    let currentList = [];
    let newList = [];

    if (e.target.value !== '') {
      currentList = this.state.list;

      newList = currentList.filter((item: any) => {
        const lc = item.toString().toLowerCase();
        const filter = e.target.value.toString().toLowerCase();

        return lc.includes(filter);
      });
    } else {
      newList = this.state.list;
    }
    this.setState({
      list: newList
    });
  }

  render() {
    return (
      <div>
        <Card className="Card">
          <CardContent className="Card-Content">
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <div className={`Card-Content__SearchBar`}>{statusList}</div>
                <div className="Card-Content__Location">
                  <TextField
                    id="outlined-name"
                    label="Search"
                    margin="normal"
                    variant="outlined"
                    fullWidth={true}
                    onChange={this.handleChange}
                  />
                </div>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
        {this.state.list.map((item: any, index: number) => (
          <ShipmentList key={index} value={item} />
        ))}
      </div>
    );
  }
}

export default Shipment;

db.json

{
    "id": "S1002",
    "name": "PO89634, PO27X",
    "cargo": [
      {
        "type": "Bikes model 27X",
        "description": "100 Bikes model 27X",
        "volume": "100"
      }
    ],
    "mode": "air",
    "type": "LCL",
    "destination": "Saarbrücker Str. 38, 10405 Berlin",
    "origin": "Shanghai Port",
    "services": [
      {
        "type": "customs"
      }
    ],
    "total": "10000",
    "status": "COMPLETED",
    "userId": "U1001"
  },


reactjs search filter ecmascript-6 react-tsx
person SKL    schedule 14.08.2019    source источник
comment
какую ошибку или нежелательный результат вы получаете?   -  person dar    schedule 14.08.2019
comment
Как выглядит ваш itemList? это массив объектов?   -  person Clarity    schedule 14.08.2019
comment
Когда я начинаю печатать, список становится пустым ShipmentList. Ничего не показывать на экране и вообще никаких ошибок.   -  person SKL    schedule 14.08.2019
comment
Что находится в «newList» до того, как вы установите состояние?   -  person dar    schedule 14.08.2019
comment
@Clarity, я обновил json в своем вопросе   -  person SKL    schedule 14.08.2019
comment
Вы не сохраняете свой первоначальный список. Итак, когда вы начнете фильтровать свой список, вы не сможете вернуться назад. У вас должно быть что-то вроде filteredList в вашем состоянии и оставить list нетронутым   -  person Antoine Grandchamp    schedule 14.08.2019
comment
@dar просто пустой массив   -  person SKL    schedule 14.08.2019
comment
@AntoineGrandchamp, можешь показать какой-нибудь пример? Как я могу нажать filteredList на ShipmentList?   -  person SKL    schedule 14.08.2019
comment
@SKL это не список, это объект.   -  person Clarity    schedule 14.08.2019
comment
Какую часть res.data вы храните в своем списке? Ваш this.list представляет собой массив, данные, которые вы возвращаете, являются объектом. Вы перебираете массив одного объекта.   -  person dar    schedule 14.08.2019

Ответы (2)


arrow_upward
3
arrow_downward

В вашем списке есть свойство name, поэтому вы, вероятно, захотите отфильтровать его на основе этого

handleChange(e: any) {
  let list = this.state.list.concat();
  const {value} = e.target; 

  if (value) {
    list = list.filter((item: any) => {
      const name = item.name.toLowerCase();
      const id = item.id.toLowerCase();
      const filter = value.toLowerCase();

      return name.includes(filter) || id.includes(filter);
    });
  } 
  this.setState({
    list
  });
}
person Clarity    schedule 14.08.2019
comment
возможен ли фильтр по имени и идентификатору? - person SKL; 14.08.2019
comment
Хорошо, также добавил id. - person Clarity; 14.08.2019
comment
Милая, спасибо @Clarity - person SKL; 14.08.2019

arrow_upward
1
arrow_downward

сначала вы используете componentDidMount(), вы должны использовать функцию componentWillMount() для загрузки данных сервера в состояние списка, а затем создать другое состояние отфильтрованного списка, которое будет отображать отфильтрованные данные при вводе в поле ввода. Не перезаписывайте данные списка, иначе вам снова придется получать данные с сервера. Используйте отфильтрованный список для поиска. componentDidMount() запускается после функции render(), и ваше состояние не будет инициализировано для использования в render()


state =  {
list: [],
filteredlist: [],
values: ''
}

componentWillMount() {
    this.getShipmentList();
}

handleChange(){as above}
person Pawan Sah    schedule 14.08.2019