javascript - 使用 QueryRender 和 React 上下文渲染不同组件时无法更新组件

Question

我有一个我似乎无法解决的问题。当我使用QueryRenderer来自中继的 HOC 组件并通过反应上下文将其渲染为子组件时，我收到以下错误：

Cannot update a component (`Customers`) while rendering a different component (`Search `). To locate the bad setState() call inside `Search`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

我的上下文和组件非常简单。一旦我更换QueryRenderer问题就消失了，所以我 100% 确定这个 HOC 组件会导致问题。

//context
const SearchProvider = ({ getVariables, query, children }) => {
  const [searchTerm, setSearchTerm] = useState()
  return (
    <SearchContext.Provider value={{ searchTerm, setSearchTerm }}>
      <Search getVariables={getVariables} query={query}>
        {children}
      </Search>
    </SearchContext.Provider>
  )
}

//component causing the error
const Search = ({ getVariables, query, setRetry, children }) => {
  const { searchTerm } = useSearch()
  return (
    <QueryRenderer
      environment={environment}
      query={query}
      variables={{ ...getVariables(searchTerm) }}
      render={({ error, props, retry }) => children({ error, props, retry })}
    />
  )
}

//and for context the component that is rendering the SearchProvider component
const Customers = () => {
  const getVariables = searchTerm => {
    //work out and return variables
  }
  return (
    <>
      <h1 className="text-xl mb-2">Customers</h1>
      <SearchProvider query={query} getVariables={getVariables}>
        {({ error, props }) => {
          if (error) return <Error />
          if (!props) return <Loading />
          return (
            <ul className="flex flex-wrap w-full mt-4">
              {props.users_connection.edges.map(({ node }) => (
                <Customer key={node.userId} customer={node} />
              ))}
            </ul>
          )
        }}
      </SearchProvider >
    </>
  )
}

非常感谢任何建议或提示。现在我只是生活在错误中。我没有注意到它会影响性能或引入任何错误。

我试过QueryRenderer直接在SearchProvider组件中移动组件，但没有任何区别。

标签： javascriptreactjsrelay