reactjs - 使用 react/firebase api 创建书店列表

问题描述

我正在练习 firebase API 来创建书店列表

我尝试使用每个标题的信息添加书籍，但失败的原因是（props.addBook 不是函数）。

谁能找到原因并向我解释？

另外，我想知道前端开发人员应该准备什么样的投资组合，在linkedin上，他们说他们期望

有前端技能经验（React/Redux/RESTApi/Html/Css 等）

我不明白经验水平应该是怎样的......

下面有两个 js 文件显示我的代码一个用于 AddBook.js /另一个用于 App.js

谢谢 :) 这是 AddBook.js

import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';


import React, { useState } from 'react';

function AddBook(props) {

  const [open, setOpen] = useState(false);
  const [book, setBook] = useState({title:'', author:'', year:'', isbn:'', price:''})
  
  const handleOpen = () => {
    setOpen(true);
  }

  const handleClose = () => {
    setOpen(false);
  }

  const handleSave = () => {
    props.addBook(book);
    handleClose()
  }

  const inputChanged = (event) => {
    setBook({...book, [event.target.name]: event.target.value})
  }
  

  return(
    <div>
      <Button variant="outlined" color="primary" onClick={handleOpen}>
        Add Book
      </Button>
      <Dialog open={open}>
        <DialogTitle>New Book</DialogTitle>
        <DialogContent>
          <TextField 
            name="title"
            value={book.title}
            onChange={inputChanged}
            margin="dense"
            label="Title"
            fullWidth
          />
          <TextField
            name="author"
            value={book.author}
            onChange={inputChanged}
            margin="dense"
            label="Author"
            fullWidth
          />
          <TextField
            name="year"
            value={book.year}
            onChange={inputChanged}
            margin="dense"
            label="Year"
            fullWidth
          />
          <TextField
            name="isbn"
            value={book.isbn}
            onChange={inputChanged}
            margin="dense"
            label="isbn"
            fullWidth
          />
          <TextField
            name="price"
            value={book.price}
            onChange={inputChanged}
            margin="dense"
            label="Price"
            fullWidth
          />
        </DialogContent>

        <DialogActions>
          <Button color="primary" onClick={handleClose}>Cancel</Button>
          <Button color="primary" onClick={handleSave}>Save</Button>
        </DialogActions>

      </Dialog>
    </div>
  );
}

export default AddBook;


// This is App.js below

import React, { useState, useEffect } from 'react';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import AddBook from './AddBook';

import './App.css';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';

function App() {

  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetchItems();
  }, [])

  const fetchItems = () => {
    fetch('https://bookstore-4ad5c-default-rtdb.firebaseio.com/books/.json')
    .then(response => response.json())
    .then(data => addKeys(data))
    .catch(err => console.error(err))
  }

  const addBook = (newBook) => {
    fetch('https://bookstore-4ad5c-default-rtdb.firebaseio.com/books/.json',
    {
      method: 'POST',
      body: JSON.stringify(newBook)
    })
    .then(response => fetchItems())
    .catch(err => console.error(err))
  }
  
  const deleteBook = (id) => {
    fetch(`https://todolist-994d4-default-rtdb.firebaseio.com/items/${id}.json`,
   {
      method: 'DELETE',
    })
    .then(response => fetchItems())
    .catch(err => console.error(err))
  }
  
  const addKeys = (data) => {
    const keys = Object.keys(data);
    const valueKeys = Object.values(data).map((books, index) =>
    Object.defineProperty(books, 'id', {value: keys[index]}));
    setBooks(valueKeys)
    }
  return (
    
    <div className="App"> 
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h4" noWrap>
          Bookstore
        </Typography>
      </Toolbar>
    </AppBar>
    <AddBook AddBook={addBook} />
    <div className="ag-theme-material" style={ { height: 400, width: 1400, margin: 'auto' } }>
      <AgGridReact rowData={books}>
        <AgGridColumn sortable={true} filter={true} field='title' />
        <AgGridColumn sortable={true} filter={true} field='author' />
        <AgGridColumn sortable={true} filter={true} field='year' />
        <AgGridColumn sortable={true} filter={true} field='isbn' />
        <AgGridColumn sortable={true} filter={true} field='price' />
        <AgGridColumn 
            headerName=''
            field='id' 
            width={90}
            cellRendererFramework={ params => 
              <IconButton onClick={() => deleteBook(params.value)} size="small" color="secondary">
                <DeleteIcon />
              </IconButton>
            }
          />      
      </AgGridReact>
    </div>
  </div>
  );
}

export default App;

[在此处输入图像描述][1] [1]：https://i.stack.imgur.com/31grH.png

标签： reactjsfirebaseapireact-hooks

reactjs - 使用 react/firebase api 创建书店列表

问题描述

解决方案

推荐阅读