第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在呈現(xiàn)其他組件警告時無法更新組件

在呈現(xiàn)其他組件警告時無法更新組件

ITMISS 2022-09-29 17:43:03
我在反應中收到此警告：index.js:1 Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Register`). To locate the bad setState() call inside `Register` 我轉到堆棧跟蹤中指示的位置并刪除了所有設置狀態(tài)，但警告仍然存在。這是否可能從 redux 調度中發(fā)生？我的代碼：注冊.jsclass Register extends Component {  render() {    if( this.props.registerStatus === SUCCESS) {       // Reset register status to allow return to register page      this.props.dispatch( resetRegisterStatus())  # THIS IS THE LINE THAT CAUSES THE ERROR ACCORDING TO THE STACK TRACE      return <Redirect push to = {HOME}/>    }    return (      <div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}>        <RegistrationForm/>      </div>    );  }}function mapStateToProps( state ) {  return {    registerStatus: state.userReducer.registerStatus  }}export default connect ( mapStateToProps ) ( Register );函數(shù)，它觸發(fā)我的寄存器窗體組件中由寄存器調用的警告.jshandleSubmit = async () => {    if( this.isValidForm() ) {       const details = {        "username": this.state.username,        "password": this.state.password,        "email": this.state.email,        "clearance": this.state.clearance      }      await this.props.dispatch( register(details) )      if( this.props.registerStatus !== SUCCESS && this.mounted ) {        this.setState( {errorMsg: this.props.registerError})        this.handleShowError()      }    }    else {      if( this.mounted ) {        this.setState( {errorMsg: "Error - registration credentials are invalid!"} )        this.handleShowError()      }    }  }堆棧跟蹤：
查看完整描述

5 回答

?
慕斯709654

TA貢獻1840條經(jīng)驗 獲得超5個贊

此警告是在 React V16.3.0 之后引入的。


如果您使用的是功能組件，則可以將 setState 調用包裝到使用效果中。


不起作用的代碼：


const HomePage = (props) => {

    

  props.setAuthenticated(true);


  const handleChange = (e) => {

    props.setSearchTerm(e.target.value.toLowerCase());

  };


  return (

    <div key={props.restInfo.storeId} className="container-fluid">

      <ProductList searchResults={props.searchResults} />

    </div>

  );

};

現(xiàn)在，您可以將其更改為：


const HomePage = (props) => {

  // trigger on component mount

  useEffect(() => {

    props.setAuthenticated(true);

  }, []);


  const handleChange = (e) => {

    props.setSearchTerm(e.target.value.toLowerCase());

  };


  return (

    <div key={props.restInfo.storeId} className="container-fluid">

      <ProductList searchResults={props.searchResults} />

    </div>

  );

};


查看完整回答
反對 回復 2022-09-29
?
慕尼黑8549860

TA貢獻1818條經(jīng)驗 獲得超11個贊

只是來這里是因為我剛剛遇到了這個問題，在我意識到我做錯了什么之前，我花了一點時間去挖掘 - 我只是沒有注意我如何編寫我的功能組件。


我想我會在這里留下一個答案，以防有人來找，他們犯了和我一樣簡單的錯誤。


我正在這樣做：


const LiveMatches = (props: LiveMatchesProps) => {

  const {

    dateMatches,

    draftingConfig,

    sportId,

    getDateMatches,

  } = props;


  if (!dateMatches) {

    const date = new Date();

    getDateMatches({ sportId, date });

  };


  return (<div>{component stuff here..}</div>);

};

我只是忘記了使用，然后發(fā)送我的 redux 呼叫useEffectgetDateMatches()


太愚蠢了，我在所有其他組件中都一直在做的事情，哈哈。


所以它應該是：


const LiveMatches = (props: LiveMatchesProps) => {

  const {

    dateMatches,

    draftingConfig,

    sportId,

    getDateMatches,

  } = props;


  useEffect(() => {

    if (!dateMatches) {

      const date = new Date();

      getDateMatches({ sportId, date });

    }

  }, [dateMatches, getDateMatches, sportId]);


  return (<div>{component stuff here..}</div>);

};

簡單而愚蠢的錯誤，但花了一段時間才意識到這一點，所以希望這有助于其他人解決這個問題。


查看完整回答
反對 回復 2022-09-29
?
慕哥6287543

TA貢獻1831條經(jīng)驗 獲得超10個贊

請仔細閱讀錯誤消息，我的指向具有錯誤設置狀態(tài)的登錄組件。當我檢查時，我有一個不是Arrow函數(shù)的onpress。

就像這樣：

onPress={navigation.navigate("Home", { screen: "HomeScreen" })}

我把它改成了這樣：

onPress={() => navigation.navigate("Home", { screen: "HomeScreen" }) }

我的錯誤消息是：

警告：在呈現(xiàn)其他組件 （） 時無法更新組件 （）。若要在 內(nèi)部找到錯誤的 setState（） 調用，請按照登錄（在登錄屏幕.tsx：20）中的 https://reactjs.org/link/setstate-in-render 中所述的堆棧跟蹤進行操作。ForwardRef(BaseNavigationContainer)SignInSignIn


查看完整回答
反對 回復 2022-09-29
?
慕娘9325324

TA貢獻1783條經(jīng)驗 獲得超4個贊

我通過將調度從寄存器組件呈現(xiàn)方法刪除到組件卸載方法來解決此問題。這是因為我希望在重定向到登錄頁面之前發(fā)生此邏輯。一般來說，最好的做法是將所有邏輯放在渲染方法之外，這樣我的代碼以前寫得很糟糕。希望這對將來的其他人有所幫助:)


我重構的寄存器組件：


class Register extends Component {


  componentWillUnmount() {

    // Reset register status to allow return to register page

    if ( this.props.registerStatus !== "" ) this.props.dispatch( resetRegisterStatus() )

  }


  render() {

    if( this.props.registerStatus === SUCCESS ) { 

      return <Redirect push to = {LOGIN}/>

    }

    return (

      <div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}>

        <RegistrationForm/>

      </div>

    );

  }

}


查看完整回答
反對 回復 2022-09-29
?
天涯盡頭無女友

TA貢獻1831條經(jīng)驗 獲得超9個贊

如果使用效果無法在您的案例中使用，或者錯誤不是由于 Redux


我曾經(jīng)將兩個變量中的一個重定向到回調隊列。setTimeoutuseState


我有一個父組件和一個子組件，每個組件中都有變量。解決方案是使用 包裝變量：useStateuseStatesetTimeout


setTimeout(() => SetFilterData(data), 0);

以下示例


父組件


import ExpenseFilter from '../ExpensesFilter'

    

function ExpensesView(props) {

    

    const [filterData, SetFilterData] = useState('')

    

    const GetFilterData = (data) => {

       // SetFilterData(data);


       //*****WRAP useState VARIABLE INSIDE setTimeout WITH 0 TIME AS BELOW.*****

       setTimeout(() => SetFilterData(data), 0);

    

    }

    

    const filteredArray = props.expense.filter(expenseFiltered => 

      expenseFiltered.dateSpent.getFullYear().toString() === filterData);

    

    

    return (

    <Window>

      <div>

        <ExpenseFilter FilterYear = {GetFilterData}></ExpenseFilter>

子組件


const ExpensesFilter = (props) => {

    

    const [filterYear, SetFilterYear] = useState('2022')

    

    const FilterYearListener = (event) => {

        event.preventDefault()

        SetFilterYear(event.target.value)

    }

    

    props.FilterYear(filterYear)

    

    return (


查看完整回答
反對 回復 2022-09-29
  • 5 回答
  • 0 關注
  • 1014 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號