如何将 React Hook useState 与自定义实体对象一起使用？答案

【问题标题】：How to use React Hook useState with a custom entity object?如何将 React Hook useState 与自定义实体对象一起使用？
【发布时间】：2020-07-28 14:32:37
【问题描述】：

我在 react native 中有一个 book 对象，我想使用 useState react hook 在我的组件中使用这个对象，但我收到一条错误消息，提示“错误：对象作为 React 子对象无效（找到：带键的对象{pages, title})。如果您要渲染一组子项，请改用数组。”

这是我的书课：

export class Book {
  pages: number;
  title: string;

  constructor(pages: number, title: string) {
    this.pages = pages;
    this.title = title;
  }
}

这是我的 BookComponent 类：

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;

我对 React Native 比较陌生，有人可以解决这个问题吗？

【问题讨论】：

错误说明了一切，您不能将对象渲染为子元素。如果您要显示属性，请执行以下操作<Text>{bookData.title}</Text>

标签： javascript reactjs react-native react-hooks react-component

【解决方案1】：

<Text>{bookData}</Text>

bookData 是一个数组。您无法使用内置组件显示数组。做这样的事情：

<View>
    <Button title="Get Sample Book" onPress={getSampleBookDataHandler} />
    {bookData.map((item) => (
        <Text>{item.title}</Text>
      ))}   
</View>

【讨论】：

【解决方案2】：

正如@AngelSalazar 所说，但由于它是一个对象数组，您应该遍历数组，map 是一个选项，还可以添加一个key，以便 React 可以更有效地更新组件。所以在 BookComponent 的返回值中你可以有

return (
    <View>
      <Button title="Get Sample Book" onPress={getSampleBookDataHandler} />
      {bookData.map((book) => <Text key={book.title}>{book.title}</Text>)}
    </View>
  );

【讨论】：

【解决方案3】：

getSampleBookDataHandler 数据应该是相同的对象格式，例如 { 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;

【讨论】：