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

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

如何將 React Hook useState 與自定義實(shí)體對(duì)象一起使用?

如何將 React Hook useState 與自定義實(shí)體對(duì)象一起使用?

我在 React Native 中有一個(gè) book 對(duì)象,我想使用 useState React Hook 在我的組件中使用這個(gè)對(duì)象,但我收到一條錯(cuò)誤消息,指出“錯(cuò)誤:對(duì)象作為 React 子對(duì)象無(wú)效(已找到:帶鍵的對(duì)象 {pages, title})。如果你打算渲染一個(gè)子集合,請(qǐng)改用數(shù)組。”這是我的書(shū)課:export class Book {  pages: number;  title: string;  constructor(pages: number, title: string) {    this.pages = pages;    this.title = title;  }}這是我的 BookComponent 類(lèi):import React, {useState} from 'react';import {Text, View, Button} from 'react-native';import getSampleBookData from './BookPresenter';const BookComponent = () => {  const [bookData, setBookData] = useState([{pages: -1, title: 'Untitled'}]);  const getSampleBookDataHandler = () => {    const book = getSampleBookData();    setBookData(book);  };  return (    <View>      <Button title="Get Sample Book" onPress={getSampleBookDataHandler} />      <Text>{bookData}</Text>    </View>  );};export default BookComponent;我對(duì) React Native 比較陌生,有人可以解決這個(gè)問(wèn)題嗎?
查看完整描述

3 回答

?
紅糖糍粑

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

<Text>{bookData}</Text>

bookData 是一個(gè)數(shù)組。您不能使用內(nèi)置組件顯示數(shù)組。做這樣的事情:


<View>

    <Button title="Get Sample Book" onPress={getSampleBookDataHandler} />

    {bookData.map((item) => (

        <Text>{item.title}</Text>

      ))}   

</View>


查看完整回答
反對(duì) 回復(fù) 2022-12-09
?
交互式愛(ài)情

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

由于它是一個(gè)對(duì)象數(shù)組,因此您應(yīng)該遍歷該數(shù)組,這map是一個(gè)選項(xiàng),也可以添加一個(gè)選項(xiàng)key,以便 React 可以更有效地更新組件。所以在 BookComponent 的返回值中你可以有


return (

    <View>

      <Button title="Get Sample Book" onPress={getSampleBookDataHandler} />

      {bookData.map((book) => <Text key={book.title}>{book.title}</Text>)}

    </View>

  );


查看完整回答
反對(duì) 回復(fù) 2022-12-09
?
絕地?zé)o雙

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

getSampleBookDataHandler 數(shù)據(jù)應(yīng)該是相同的對(duì)象格式,如 { pages:1, title:'xxyy'}


import React, {useState} from 'react';

import {Text, View, Button} from 'react-native';

import getSampleBookData from './BookPresenter';


const BookComponent = () => {

  const [bookData, setBookData] = useState([]);


  const getSampleBookDataHandler = () => {

    setBookData(getSampleBookData);

  };


useState(() => {

  getSampleBookDataHandler();

},[getSampleBookDataHandler])


  return (

    <View>

      <Button title="Get Sample Book" onPress={getSampleBookDataHandler} />

      {bookData && <Text>{bookData.title}</Text> }

    </View>

  );

};


export default BookComponent;


查看完整回答
反對(duì) 回復(fù) 2022-12-09
  • 3 回答
  • 0 關(guān)注
  • 133 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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