reactjs - 使用 componentDidUpdate react 上下文

Question

我正在运行这样的模式，假设 SearchResultsContainer 已安装，并且搜索栏在某处设置输入。

class SearchResults {
   render() {
      return(
        <ResultsContext.Consumer value={input}>
        {input => <SearchResultsContainer input=input}
        </ResultsContext.Consumer>
   )
}

class SearchResultsContainer
  componentDidUpdate() {
      //fetch data based on new input
      if (check if data is the same) {
        this.setState({
          data: fetchedData
        })
      }
  }
}

每当调用新的上下文值时，这都会调用双重获取，因为 componentDidUpdate() 将触发并设置数据。在来自结果上下文的新输入上，它将调用 componentDidUpdate()，获取、设置数据，然后调用 componentDidUpdate()，并获取，然后检查数据是否为相同并停止循环。

这是使用上下文的正确方法吗？

Answer 1

我使用的解决方案是通过高阶组件将上下文传输到 props。

我使用了这个非常有用的 github 答案 https://github.com/facebook/react/issues/12397#issuecomment-374004053

结果如下所示:my-context.js:

import React from "react";

export const MyContext = React.createContext({ foo: 'bar' });

export const withMyContext = Element => {
  return React.forwardRef((props, ref) => {
    return (
      <MyContext.Consumer>
        {context => <Element myContext={context} {...props} ref={ref} />}
      </MyContext.Consumer>
    );
  });
};

使用上下文的其他组件:

import { withMyContext } from "./path/to/my-context";

class MyComponent extends Component {
 componentDidUpdate(prevProps) {
    const {myContext} = this.props
    if(myContext.foo !== prevProps.myContext.foo){
      this.doSomething()
    }
  }
}
export default withMyContext(MyComponent);

某处一定有一个上下文生成器:

<MyContext.Provider value={{ foo: this.state.foo }}>
  <MyComponent />
</MyContext.Provider>