Question

我很擅长做出反应并一直致力于这个新页面的工作。基本上，有一个带过滤器选项的面板，可让您按颜色过滤对象。一切正常，但我注意到当您选择过滤器时整个过滤器面板会闪烁。

以下是过滤器组件中的区域函数，我认为它直接在过滤器上，然后是它们插入的父组件。当我最初写这个时，过滤器组件也调用了重新渲染，但我已经重构，所以父进程处理所有这些 - 它导致了页面的分页功能的其他问题。自然。我觉得那是我的问题。整个过程都被传递然后被重新渲染。但我不知道如何解决它。或者什么是最好的。

检查以前的道具是否与来自父级的道具不同，如果是，则创建新状态的副本，使用这些选项调用render方法。在这一点上，仍然在儿童组成部分。

componentDidUpdate(prevProps, prevState) {
if (prevState.selectedColorKeys.length !== this.state.selectedColorKeys.length ||
    prevState.hasMatchingInvitation !== this.state.hasMatchingInvitation) {
  const options = Object.assign({}, {
    hasMatchingInvitation: this.state.hasMatchingInvitation,
    selectedColorKeys: this.state.selectedColorKeys
  });
  this.props.onFilterChange(options);
  }
}

处理活动类并阻止用户选择两次相同的过滤器

isColorSelected(color) {
  return this.state.selectedColorKeys.indexOf(color) > -1;
}

调用删除带有颜色名称的过滤器，以便用户可以使用相同的过滤器按钮取消选择，或者如果是新的过滤器，则通过将颜色添加到所选颜色键的数组来设置状态

filterByColor(color) {
  if (this.isColorSelected(color.color_name)) {
    this.removeFilter(color.color_name);
    return;
} 
this.setState({
  selectedColorKeys: 
  this.state.selectedColorKeys.concat([color.color_name])
  });
}

创建颜色面板本身

// color panel
colorOptions.map(color => (
    colorPicker.push(
      (<li className={['color-filter', this.isColorSelected(color.color_name) ? 'active' : null].join(' ')} key={color.key} ><span className={color.key} onClick={() => { this.filterByColor(color); }} /></li>)
    )
));

父组件

使用onFilterChange函数引用过滤器子项的回调

<ThemesFilter onFilterChange={this.onFilterChange} />



onFilterChange(filters) {
const { filterThemes, loadThemes, unloadThemes } = this.props;
unloadThemes();
this.setState({
  filterOptions: filters,
  offset: 0
}, () => {
  filterThemes(this.state.filterOptions.selectedColorKeys, this.state.filterOptions.hasMatchingInvitation);
  loadThemes(this.state.offset);
  });
}

当我设置断点时，一般流程似乎是：

filterByColor在传递该颜色的事件处理程序中触发
将活动类添加到颜色中，生成并附加该颜色的过滤器标记
componentDidMount接受之前的props / state并将其与新的props / state进行比较。如果它们不匹配，即状态已经改变，它会创建该对象的副本，分配更改内容的新状态。将其作为道具传递给onFilterChange，这是父母中的一个函数，带有这些选项。
onFilterChange采用这些选项，调用动作方法获取新主题（过滤实际发生在后端，我真正需要做的就是更新页面）并将这些转发。它还将偏移设置为0，这是页面的分页功能。

看起来问题可能出在componentDidUpdate函数周围，在设置断点并观察它从filterByColor到componentDidMount的步骤之后，componentDidMount循环两次，再次检查colorIsSelected，以及整个颜色面板暂停重新渲染，你会闪烁。

创建副本是否可能导致它？因为它正在被处理，基本上，作为一个新的对象isColorSelected感觉有必要仔细检查？我们非常感激你们的任何帮助，这个狗屎到目前为止我无法看到太阳。

Answer 1

你能改变吗？

$query = new WP_Query(array( 'relation' => 'OR', 'posts_per_page' => 2, array( 'taxonomy' => 'post_format', 'field' => 'slug', 'terms' => array( 'link' ) // Single terms as string - multiple as array ), array( 'taxonomy' => 'Tag', 'field' => 'id', 'tag__in' => array('16') // 16 is the code for tag longform ) ));

与

componentDidUpdate(prevProps, prevState)

Rerender上的React组件闪烁

1 个答案: