Question

我遇到了一个已经搜索过的问题，没有任何帮助。

会发生什么：每次我在DropdownItem中单击时，它都会重新渲染，看起来屏幕会重新加载。。我看到这是因为我使用带箭头的onclick功能，但我不知道如何使用，并且不提供重新渲染...

有人帮助我吗？

<NameFilter>Country</NameFilter>
<DropdownStyled 
   defaultText='Select a Country'
   value={this.props.clear === true ? "" : valueCountry}>
   {filters.country.map(i => 
       <DropdownItem onClick={() => this.props.handleFilter("country", "countryStatus", i)}
          itemText={i} value={i}/>)}
</DropdownStyled>

HandleFilter：

toFilter = (nameFilter, nameFilterStatus, valueFilter) => {
  this.setState({
    [nameFilter]: valueFilter,
    [nameFilterStatus]: valueFilter
  });
}

换句话说：单击后重新渲染所有组件。

Answer 1

// Instead of inline arrow function use simple function
   onChange={this.toFilter("country", "countryStatus", i)}

// Method declaration - Use arrow function here
// Note: Double arrow here:-
   toFilter = (nameFilter, nameFilterStatus, valueFilter) => () => {
     this.setState({
       [nameFilter]: valueFilter,
       [nameFilterStatus]: valueFilter
     });
   }

希望有帮助！

Answer 2

每次使用setState都会在更新状态后触发重新渲染。如果您想避免这种情况，请尝试使用shouldComponentUpdate

带箭头功能的OnClick提供重新渲染React

2 个答案: