代码之家 › 专栏 › 技术社区 › Blaine Lafreniere

组件未从作为prop传入的对象在页面上呈现任何值

reactjs

Blaine Lafreniere · 技术社区 · 5 年前

下面的例子很简单。什么时候? new Book(id); 被称为 Book 构造函数将对我的后端API进行API调用,获取书籍的JSON数据,并设置 书 喜欢 title , synopsis 等等。

这个 <BookDetailComponent /> 只是应该呈现的细节 书 例子

import React from "react";
import { useParams } from "react-router-dom";
import Book from "../../../modules/books";

export default function BookDetail(props) {
    let {id} = useParams();
    let book = new Book(id);
    return (
        <BookDetailComponent book={book} />
    )
}

export class BookDetailComponent extends React.Component {
    render () {
        return (
            <div>
                <h2>{this.props.book.title}</h2>
                <div>
                    {this.props.book.synopsis}
                </div>
            </div>
        )
    }
}

我可以看到数据已经收到 BookDetailComponent 在React devtools选项卡中。正如您在屏幕截图中看到的, props.book 是一个有标题、概要等的对象。

但是,这些信息似乎都没有显示在页面上。

编辑:

根据要求,这是 书 :

export default class Book {
    constructor(id) {
        this.id = id
    }

    load = (callback) => {
        Axios.get(`${process.env.REACT_APP_API_URL}/books/${this.id}`).then(response => {
            this.author_id = response.data.author_id
            this.title = response.data.title
            this.synopsis = response.data.synopsis
        })
    }
}

0 回复 | 直到 5 年前

Shubham Khatri 5 年前

当调用load函数时,Book模块会进行异步调用。现在,它不会触发BookDetail组件的重新渲染以反映更新的值。从今天开始,您也不能在渲染中直接调用异步api

我建议你将Book转换为一个获取数据并使用它的自定义钩子

const useBook = (id) => {
    const [book, setBook] = useState({});
    useEffect(() => {
        Axios.get(`${process.env.REACT_APP_API_URL}/books/${this.id}`).then(response => {
          setBook({
            author_id: response.data.author_id,
            title: response.data.title,
            synopsis: response.data.synopsis,
        });
    }, [id]);
    return book
}
export default useBook;

import useBook from "../../../modules/books";

export default function BookDetail(props) {
    let {id} = useParams();
    let book = useBook(id);
    return (
        <BookDetailComponent book={book} />
    )
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

6 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前