ReactJS：调用 render() 中的函数时组件的内容不会更新

Question

我正在努力取得一些成就，但我不确定这是最好的方法：

我在 <ProductDisplay /> 组件中显示了一组产品 (productArray)。我还有一个 <FilterPanel /> 允许我对 productArray 中的元素进行排序。 <ProductDisplay /> 和 <FilterPanel /> 都包含在一个名为 <MainContainer /> 的 hoc 中，格式如下：

<MainContainer>
    <FilterPanel />
    <ProductDisplay />
</MainContainer>

<MainContainer /> 在其 render() 方法中有一个排序函数。排序函数被传递给 <FilterPanel />，当被调用时，它对 productArray 进行排序。排序后的 productArray 从 <MainContainer /> 传递到 <ProductDisplay />

这里是<MainContainer />的简化代码：

//import sorting functions: categorySort, timeSort, and ratingSort

class MainContainer extends Component {

  constructor(props) {
    super(props)

    this.state = {
      sort: ""
    }
  }

  render() {
    const { productArray } = this.props; //getting an array of products from props

    let sortResult = productArray; //if no sorting selected, sortResult will be the default order
  
    const performSort = (sortType) => {
      this.setState({sort: `${sortType}`}); //not really important

      switch(sortType) {
        case 'time':
          sortResult = timeSort(productArray); //gets sorted when called
          break;
        case 'category':
          sortResult = categorySort(productArray); //gets sorted when called
          break;
        case 'rating':
          sortResult = ratingSort(productArray); //gets sorted when called
        break;
        default:
          console.log('default case')
      }
    }

    console.log( `sortResult final`);
    console.log(sortResult);        //does not reflect sorting done above; still in initial state

    return (
      <div>
          <FilterPanel performSort={performSort}/>
          <ProductDisplay sortResult = {sortResult} />
      </div>
    );
  }
}

当从 <FilterPanel /> 调用排序函数 'performSort' 时，它成功地在 switch 语句中生成一个排序的 'sortResult' 数组，但是， 'sortResult' 外面（之后） switch 语句没有改变（并且正在传递给 <ProductDisplay /> 不变）。这很奇怪，因为 'sortResult' 应该在 switch 语句的范围内。

非常感谢任何解决这个问题的帮助（还有关于如何做得更好的任何建议。请注意，我还没有学习 hooks，所以我更喜欢没有 hooks 的解决方案）。

Answer 1

React 组件仅在传入的 props 更改、状态更改或使用的上下文更改时重新渲染。（或者，在 React Router 中，当 URL 发生变化时。）这个基本事实是理解 React 的关键部分。

在这种情况下，您正在更改一个Javascript 变量...但不是我提到的三（四）件事之一。

要解决此问题，您可以将 sortResult 设为状态的一部分（即 this.state.sortResult），然后在完成排序后将其设为 setState。因为将改变状态，它会导致你的组件重新渲染，并从你返回的 JSX 中生成新的 DOM。

ReactJS：调用 render() 中的函数时组件的内容不会更新

ReactJS: Contents of a component not updating when a function inside render() is called

javascript

scope

reactjs