相关疑难解决方法(0)

反应文件指出render函数应该是纯这意味着它不应该使用this.setState它.但是,我相信,当状态依赖于"远程",即从阿贾克斯call.The唯一的解决办法的结果是setState()一个内部render功能

在我的情况下.我们的用户可以登录.登录后,我们还需要检查用户的访问权限(ajax调用)来决定如何显示页面.代码是这样的

React.createClass({
     render:function(){
          if(this.state.user.login)
          {
              //do not call it twice
              if(this.state.callAjax)
              {
              var self=this
              $.ajax{
                  success:function(result)
                  {
                      if(result==a) 
                      {self.setState({callAjax:false,hasAccess:a})}
                      if(result==b) 
                      {self.setState({callAjax:false,hasAccess:b})}

                  }
              }
              }
              if(this.state.hasAccess==a) return <Page />
              else if(this.state.hasAccess==a) return <AnotherPage />
              else return <LoadingPage />
          }
          else
          {
            return <div>
                   <button onClick:{
                   function(){this.setState({user.login:true})}
                   }> 
                   LOGIN
                   </button>
                   </div>
          }
     }
})

ajax调用不能出现,componentDidMount因为当用户单击LOGIN按钮时,页面被重新呈现并且还需要ajax调用.所以我认为唯一的地方setState是在render函数内部违反了React原则

更好的解决方案？提前致谢

我试图使用setState()方法重置容器中的React状态变量(默认值).但是得到以下错误

 Warning: setState(...): Cannot update during an existing state transition 
(such as within `render` or another component's constructor). Render methods 
 should be a pure function of props and state; constructor side-effects are an anti-pattern, 
 but can be moved to `componentWillMount`.

最后:超出最大调用堆栈大小.

我的代码如下:

resetMsg=()=>  {  
const company = this.state.company;
company.id = 0;
company.messages = [];    
this.setState({company: company});       
}

当Redux状态的变量为true时,我调用resetMsg().

我调用resetMsg的代码(resetMessages的值最初为false,我需要重置React-state,当它为true时):

    render() {
    if(this.props.resetMessages){           
        this.resetMsg();           
    }

我正在开发 next.js 应用程序，我的页面布局遵循以下层次结构：

  _app.js
     Page.js
         Header.js
         PageContent.js

我需要在不使用 redux 的情况下将一些参数从 PageContent 传递到 Header。

在 _app.js 里面我有以下内容：

class Main extends App {
  render() {
  const {
    Component,
    pageProps,
    apollo,
    router: { route }
  } = this.props;

 return (
  <ApolloProvider client={apollo}>
      <Page
        pathname={route.split("/")[1]}
        {...pageProps}
        localLinks={Component.LocalLinks}
        render={props => <Component {...props} />}
      />
   </ApolloProvider>
  );
 }
}

我假设应该有一种方法可以将一些 propse (pageProps) 从 PageContent 传递到 _app 并将其传递到 Page 并使它们可以访问 header。这里有我不熟悉的 next.js 特定技巧吗？

我遇到了一个我似乎无法解决的问题。当我使用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, …