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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

“對(duì)象作為 React 子項(xiàng)無效。如果您打算渲染子項(xiàng)集合,請(qǐng)改用數(shù)組。” 錯(cuò)誤

“對(duì)象作為 React 子項(xiàng)無效。如果您打算渲染子項(xiàng)集合,請(qǐng)改用數(shù)組。” 錯(cuò)誤

婷婷同學(xué)_ 2023-03-03 14:52:22
我正在嘗試將一個(gè)對(duì)象作為user我的 React 的值傳遞給. 然而,React 不喜歡將對(duì)象作為子對(duì)象傳遞的想法。這是我收到的錯(cuò)誤消息:Context.Provider<UserContext.Provider value={user} />錯(cuò)誤:對(duì)象作為 React 子項(xiàng)無效(已找到:具有鍵 {id、用戶名、名字、姓氏、電子郵件、頭像} 的對(duì)象)。如果您打算渲染子集合,請(qǐng)改用數(shù)組。我希望有人能幫忙。這是我的 React 組件,其中發(fā)生了所有這些:class MyApp extends App {  constructor(props) {    super(props);    this.state = {      user: {},      authenticating: false,    };  }  logout = () => {    ...  };  render() {    const { Component, pageProps } = this.props;    const user = {      user: this.state.user,      logout: this.logout,    };    return (      <>        {!this.state.authenticating && (          <UserContext.Provider value={user}>            <Navbar />            <Component {...pageProps} />          </UserContext.Provider>        )}      </>    );  }}有趣的是,當(dāng)我改變const user = {  user: this.state.user,  logout: this.logout,};到(例如)const user = {  username: this.state.user.username,  logout: this.logout,};一切都很好。所以(正如上面的錯(cuò)誤消息所暗示的那樣)問題在于傳遞this.state.user給我的上下文提供者。為什么?我該如何解決這個(gè)問題?另外,這是我的<Context.Consumer />:  <UserContext.Consumer>    {user => (      <>        {user.user ? (          <>            <Avatar user={user.user} />            <Button onClick={user.logout}>Logout</Button>          </>        ) : (          <>            <Nav.Link href="/users/login">Log in</Nav.Link>            <Nav.Link href="/users/signup">Sign up</Nav.Link>          </>        )}      </>    )}  </UserContext.Consumer>
查看完整描述

2 回答

?
狐的傳說

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

代替


function Avatar({ user }) {

  return <Nav.Link href="/users/login">{user}</Nav.Link>;

}


function Avatar({ user }) {

  return <Nav.Link href="/users/login">{user.something}</Nav.Link>;

}


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
鳳凰求蠱

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊

代碼沙盒: https://codesandbox.io/s/trusting-rubin-7rcc8


很可能您正在嘗試像這樣呈現(xiàn)上下文,這會(huì)導(dǎo)致錯(cuò)誤,而不是解構(gòu)上下文/用戶對(duì)象。


// this results in

// Objects are not valid as a React child (found: object with

// keys {username, age}). If you meant to render a collection of 

// children, use an array instead.


<Consumer>

{(ctx) => (

<>

 {ctx.user}

</>

)

</Consumer>

應(yīng)用程序.js


import React from "react";

import UserState, { Consumer } from "./UserState";


const Avatar = ({ user }) => (

  <>

    <div>{user.username}</div>

    <div>{user.age}</div>

  </>

);


const UserData = () => {

  return (

    <Consumer>

      {(ctx) => (

        <>

          {ctx.user && (

            <>

              <Avatar user={ctx.user} />

            </>

          )}

        </>

      )}

    </Consumer>

  );

};


export default function App() {

  const userState = {

    user: {

      username: "hi",

      age: 18

    }

  };


  return (

    <UserState.Provider value={userState}>

      <UserData />

    </UserState.Provider>

  );

}

用戶狀態(tài).js


import React from "react";


const UserState = React.createContext({});


export default UserState;


export const { Consumer } = UserState;


查看完整回答
反對(duì) 回復(fù) 2023-03-03
  • 2 回答
  • 0 關(guān)注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)