Question

我具有要根据项目列表复制的项目组件。呈现页面并显示所有Project组件后，我要启用搜索功能。

执行搜索并过滤项目列表时，搜索后，旧结果将显示在新结果附近！

如何使其仅显示搜索结果？

更新的代码（有效）：

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>
    );
}

}

Answer 1

假设您要呈现一个列表：

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 组件将被取消渲染，因此将被卸载。

Answer 2

这里有几个问题。 1.您正在使用此行更改状态：

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

和这一行：

projectsComponents.push

与react一起使用时完全不建议这样做，我相信这就是为什么您需要类似this.forceUpdate()的方法的原因。

您实际上并没有在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"/>

如何卸载组件？

2 个答案: