Как выгрузить компоненты? - PullRequest
Новая
       18

Как выгрузить компоненты?

1 голос
/ 01 июля 2019

У меня есть компонент проекта, который я дублирую согласно списку проектов. После отображения страницы и отображения всех компонентов проекта я хочу включить функцию поиска.

Когда я выполняю поиск и фильтрую список проектов, старые результаты отображаются рядом с новыми после поиска!

Как заставить его отображать только результаты поиска?

Обновлен код (рабочий): 

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

}

Ответы [ 2 ]

0 голосов
/ 01 июля 2019

Здесь есть пара вопросов. 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"/>
0 голосов
/ 01 июля 2019

Допустим, вы выводите список: 

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 с указанным индексом будет не обработан и, следовательно, не подключен.

...