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

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

发生的是：每次我单击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
  });
}

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

最佳答案

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

希望能帮助到你！！