Reactjs 搜索/过滤功能

Question

我尝试在 reactjs 应用程序上实现 search/filter 功能。用户可以搜索任何内容，对象应该 return 基于搜索值。 handleChange 中实现的搜索逻辑。任何人都可以让我知道我哪里出错了吗？

It's doesn't return any errors. Just screen gone blank

Shipment.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"
  },

Answer 1

你的列表有一个 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
  });
}

Answer 2

首先你要使用 componentDidMount()，你必须使用 componentWillMount() 函数将服务器数据加载到列表状态，然后创建另一个过滤列表状态，当你在输入字段中键入时，它会显示过滤后的数据。不要覆盖您的列表数据，否则您必须再次从服务器获取数据。使用过滤列表进行搜索。 componentDidMount() 在 render() 函数之后运行，您的状态将不会被初始化以用于 render()


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

componentWillMount() {
    this.getShipmentList();
}

handleChange(){as above}

Reactjs 搜索/过滤功能

Reactjs search / filter function

search

filter

ecmascript-6

reactjs

react-tsx