Question

我试图在reactjs应用程序上实现搜索/过滤功能。用户可以搜索任何内容，并且对象应根据搜索值返回。在handleChange中实现的搜索逻辑。谁能让我知道我在哪里犯错了？

它不会返回任何错误。只是屏幕变黑了

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（）中使用

@model IEnumerable<HelloWorldMvcApp.Policy>
@{
    Layout = null;
}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <h1>Hello Stranger</h1>

            <div><b>Table Format Data Displaying in ForEach</b><br /></div>  
<table class="table table-bordered table-responsive table-hover">  
    <tr>  
        <th>PolicyNumber</th>  
        <th>VehicleID</th>  
        <th>Model </th>  
        <th>Year </th>  
        <th>Make </th> 
            <th>Coverage </th> 
    </tr>  
    @foreach (var d in Model)  
    {  
        <tr>  
            <td rowspan="@d.Coverages.Count()">@d.PolicyNumber</td>  
            <td rowspan="@d.Coverages.Count()">@d.VehicleID</td>  
            <td rowspan="@d.Coverages.Count()">@d.Model</td>  
            <td rowspan="@d.Coverages.Count()">@d.Year</td>  
            <td rowspan="@d.Coverages.Count()">@d.Make</td>  
@{int i = 0; }
            @foreach (var cov in d.Coverages)
                           {
                                if (i > 0)
                               {
                                   @:</tr><tr>
                               }
                                <td >@cov</td>
                                    i++;
                           }
        </tr>  
    }  
            </table>

            </div>
        </div>

        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

        <script type="text/javascript">



        </script>
    </body>
</html>

ReactJS搜索/过滤功能

2 个答案: