Crud em reactjs

Question

我正在学习react，并为图书控制创建一个简单的库设计。我在开始学习的时候很在行，我想要实现一堆书。

我完美地创造了布局和路线。当我导航到图书路径时，我将创建一个代码来列出这些书籍。只有从这个视图/组件，我想要创建一个代码，我仍然不知道如何创建图书注册和更新视图。但我想把这些新屏幕称为图书列表屏幕。不想把所有的东西放在一个单一的视图上！我能做的事。

这是我为你做的代码，让你更好地理解。

https://github.com/wagnergrilo85/library-react/blob/master/src/screens/book/Book.js

Answer 1

您的文件结构可以如下所示：

• Book.js (在这里您可以处理数据，从这个组件可以管理所有较小的组件)

​

import React from 'react';
import BookList from './bookList';

class Book extends React.Component {
    
        constructor(){
            super()
            this.state = {
                books: [],
                book: {},
            }
        }
    
        componentDidMount(){
            // Here you will call API to get full list of book
            // this.setState(books: responseApi)
        }

        showBook(id){
            // Find the single book 
            // this.setState(book: responseApi)
        }

        updateBook(id, data){
            // Find the single book 
            // Get new data
            // Update API
        }

        deleteBook(id){
            // Find the single book
            // Delete book in API
        }
    
        render(){

    
            return(
                <div>
                    <BookList books={this.state.books} />
                </div>
            )
        }
}

​

• BookList.js (显示列表)
• BookShow.js (显示单本图书信息)
• BookUpdate.js
• BookCreate.js

- BookForm.js

​

你可以从那里开始自己找剩下的