1

I have project component that I'm duplicating according to a project list. Once the page is rendered and all Project components are displayed I want to enable a search functionality.

When I perform the search and I filter the project list, the old results are displayed near the new results after search!

How to cause it to display only search results?

Updated code (Working):

class ProjectsList extends Component {

state = {
    projectsDetails: [......],
    filterKey: null
}

componentWillMount() {
    //service.getProjectDetails();
}

handleSearchChange(e) {
    this.setState({ filterKey: e.target.value });
}

render() {
    const { filterKey, projectsDetails } = this.state;

    const filteredProjects = filterKey
        ? projectsDetails.filter(item =>
            item.Name.toLowerCase().includes(filterKey.toLowerCase()) && item.FabricationConfigs !== null
        )
        : projectsDetails.filter(item =>
            item.FabricationConfigs !== null
        );

    return (
        <table width="100%">
            <tbody>
            <tr>
                <td>

                    <div className="Toolbar2">
                        <table width="100%">
                            <tbody>
                            <tr>
                                <td>
                                    <h1>Projects</h1>
                                </td>
                                <td  width="20%" align="right">
                                    <Search labelText="" id="search-1" onChange={ this.handleSearchChange.bind(this) }/>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <hr></hr>
                    </div>
                    <div className="inline">
                        {filteredProjects.map(item =>
                            <Project
                            key={item.Name}
                            name={item.Name}
                            description={item.Description}
                            configurations={item.FabricationConfigs}/>)}
                    </div>

                </td>
            </tr>
            </tbody>
        </table>
    );
}

}

4

2 回答 2

0

假设您正在渲染一个列表：

state = {
  list: [{code: 'a'},{code: 'b'},{code: 'c'}],
};

//some render function
<div>{this.state.list.map(item => <Item item={item} />}</div>

为了不卸载这些项目之一，您必须取消渲染它们。

因此您可以按索引删除一个（例如）。您可以使用您的功能进行过滤。

removeByIndex(idx) {
  this.setState({
    list: this.state.list.filter((item, index) => index !== idx),
  });
}

因此，具有所述索引的Item组件将被取消渲染并因此被卸载。

于 2019-07-01T13:16:36.417 回答
0

这里有几个问题。1. 你正在用这一行改变状态：

this.state.filteredProjects = this.state.filteredProjects.filter

这行：

projectsComponents.push

使用时根本不推荐使用react，我相信这就是您需要类似this.forceUpdate().

  1. 您实际上并没有在 render 方法中呈现任何更新。请记住，render每次更新状态或新道具时，内部的任何内容都会运行。因此您可以使用存储在 中的过滤值state，获取您的列表，并根据该值存储它的过滤版本。然后只需使用 . 渲染过滤后的列表.map。

这是一个简单的运行示例：

class App extends React.Component {
  state = {
    list: [{ name: "John" }, { name: "Jane" }, { name: "Mike" }],
    filterKey: null
  };

  onFilterChange = ({ target }) => {
    this.setState({ filterKey: target.value });
  };

  render() {
    const { filterKey, list } = this.state;
    const filteredList = filterKey
      ? list.filter(item =>
          item.name.toLowerCase().includes(filterKey.toLowerCase())
        )
      : list;
    return (
      <div>
        <input
          value={filterKey}
          onChange={this.onFilterChange}
          placeholder="filter..."
        />
        <hr />
        {filteredList.map(item => (
          <div>{item.name}</div>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

于 2019-07-01T13:34:18.480 回答