当 useEffect 依赖项更改时，React 组件不会重新渲染

Question

问题：

我目前正在创建一个 React 应用程序，可让您向教授借书。在这个应用中，当用户结账时，它有一些需要明显更新的东西。

所以首先是检出的总图书数量，或者当整个图书对象发生变化时，组件应该重新渲染。

我有一个 useEffect 函数，它正在对 mongodb 数据库进行 api 调用，并且正在访问一个文档，该文档将在响应应用程序时产生一个书本对象。这是 useEffect 函数：

useEffect(() => {


        const getBook = async () => {
           
            // console.log(book)
            await api.getBookById(props.id).then(async book => {
                
                setBook({...book.data.data})

                setCopies([...book.data.data.copies])
                var num = 0;

                await book.data.data.copies.map(async (copy, index) => {
                    if(copy.checkedOut){ 
                        num++;
                        
                    }
                })

                setNumCheckedOut(num)
            }).catch(e => {console.log(e)}) 
        }

        

        getBook();
          


        
    }, [book])

我什至为 book.checkedOutCopies 之类的东西替换了 book 对象依赖项。哪个应该返回一个数字，如果该数字与上一个不同，那么它应该重新渲染组件。然而，事实并非如此。无论我尝试什么，我都无法在此文档更改时重新渲染组件。我什至创建了一个名为 reRender 的数字，并在结帐书籍的 api 调用完成调用时更新它。即使它有效，这也是不受欢迎的，因为对于已经在页面上但与点击结帐按钮的人不在同一台计算机上的人来说，它不会改变。

我只是想让这个组件在 mongo db 数据库中的 book 对象发生变化时重新渲染。根据我的理解，正确的方法在上面。问题是，即使在我成功结帐一本书之后，状态也永远不会更新。屏幕上的已借书数量保持不变：

这是页面外观的屏幕截图：

当点击更新按钮并响应成功状态时，绿皮书应该变成红色。 Total Checked Out 也应该改变。这两种情况都不会发生。

这是书对象：

const Book = new Schema(
    {
        bookName: { type: String, required: true },
        bookDesc: { type: String, required: false},
        numCheckedOut: { type: Number, required: false },
        copiesAvail: {type: Number},
        whosChecked: [{
            type: mongoose.Schema.Types.ObjectId,
            ref: 'prof'
        }],
        copies: [Copy],
        ISBN: { type: Number, required: true },
        nextDue: {type: String},
        nextProf: {type: Schema.Types.ObjectId, ref: 'prof'}
        
    },
    { timestamps: true },

)

我不明白为什么它没有更新，如果您能提供完整的文件，我将不胜感激：

import React, { useState, useEffect, useRef } from 'react'
import api from '../api'
import { InputGroup, Form, FormControl, Container, Button, Col, Row, Toast } from 'react-bootstrap'
import { FaBook } from 'react-icons/fa'
import BookIconFunc from '../components/helperComponents/bookIconFunc'
import Select from 'react-dropdown-select';
import './bookslist.css'
import Axios from "axios";
import BookIcoContext from '../context/BookIconContext';
import DatePicker from "react-datepicker";
import ColoredLine from '../components/helperComponents/ColoredLine'
import CheckoutBookHistroy from '../components/CheckoutBookHistory/CheckoutBookHistory'
import { useHistory } from 'react-router-dom';




const handleCheckout = async (e) => {
    e.preventDefault();
}


const topLeftBook = {
    marginTop: "1.0rem",
    display: "flex",
    width:"fit-content",
    height: "fit-content",
    justifyContent: "left",
    flexDirection: "column",
    alignItems: "center",
    borderRadius: "0px",
    border: "2px solid #73AD21",
    padding: "0.5rem 2.5rem",
}

const booksRows = {
    // marginTop: "4.0rem",
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    padding: "1.0rem",
    justifyContent: "left",
    // border: "2px solid black",
    width: "50%",
    marginLeft: "1.0rem"
    
}

const bottomForm = {
    flexGrow: "1"

}

const indBook = {
    margin: "0.5rem",
    color: "green"
}

const updateButtonStyle = {
    display: "flex",
    width: "100%",
    justifyContent:"center"
    
}

const topOfPage = {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    verticalAlign: "middle" 
}

const bookIcon = {
    width: "10.0rem",
    

}

const bottomOfPage = {
    display: "flex",
    flexDirection: "row",
    marginBottom: "1.0rem",
    verticalAlign: "middle",
    flexGrow: "1",
    marginLeft: "1.0rem"
    
}

const topForm = {
    width: "100%",
    marginLeft: "2.0rem",
    verticalAlign: "middle",
    alignItems: "center",
    justifyContent: "center"
    
    
}

export default function BooksUpdate(props) {


    /* TOP FORM VARIABLES */
    const [book, setBook] = useState(null)
    const [bookName, setBookName] = useState()
    const [desc, setDesc] = useState()
    const [ISBN, setISBN] = useState()
    const [copies, setCopies] = useState()


    const history = useHistory();




    


    /* BOOK ICON CONTEXT STATE */
    const [iconState, setIconState] = useState(false)

    /* re render state when */
    const [reRender, setReRender] = useState(0);



     /* BOTTOM FORM VARIABLES */
     const [newCopies, setNewCopies] = useState()
     const [checkoutCopiesNum, setCheckoutCopiesNum] = useState(0)
     const [numCheckedOut, setNumCheckedOut] = useState(0)
     const [allProfs, setAllProfs] = useState()
     const [profChosen, setProfChosen] = useState()
     const [bookicoref, setIcoRefs] = useState([]);
     const [dueDate, setDueDate] = useState(new Date());

     var anotherRender = 0;




    const submitCheckout = async (e) => {
        e.preventDefault();
        try {
          
          
          const checkoutBookData = {book, checkoutCopiesNum, profChosen, dueDate};
          
       
          const checkoutBookRes = await Axios.post("http://localhost:8174/api/book/checkout/" + props.id, checkoutBookData)
          if(checkoutBookRes.statusText === 'OK'){
            setShowCheckoutToast(!showCheckoutToast)
          }
          /* Display toast that confirms the book was checked out */
          setReRender(reRender+1)
          anotherRender = anotherRender + 1
        // history.push("/Books/Update/" + props.id)
        }
        catch (err) {
            alert(err)
        }
        
    }

    const handleSetBook = (bookData) => {
        setBook({...bookData})
    }



    useEffect(() => {


        const getBook = async () => {
           
            // console.log(book)
            await api.getBookById(props.id).then(async book => {
                await handleSetBook(book.data.data)
                // setBook(book.data.data)

                setCopies([...book.data.data.copies])
                var num = 0;

                await book.data.data.copies.map(async (copy, index) => {
                    if(copy.checkedOut){ 
                        num++;
                        
                    }
                })

                setNumCheckedOut(num)
            }).catch(e => {console.log(e)}) 
        }

        

        getBook();
          


        
    }, [book])

    useEffect( () => {

        const getProfs = async () => {

            await Axios.get('http://localhost:8174/user/professors').then((ps) => {
                var array = []

                ps.data.data.map((prof, index) => {
                    array.push({label: prof.name, value: prof, key: prof._id})
                })
                setAllProfs(array)

            })
            
        }

        getProfs()

    }, [])


    

    


    /* EFFECT TO CREATE REFS FOR EACH BOOK ICON */
    useEffect(() => {
        
        // add or remove refs
        copies &&
        setIcoRefs(bookicorefs => (
          Array(copies.length).fill().map((_, i) => bookicorefs[i] || React.createRef())
        ))
    }, [copies]);





    

    const handleUpdate = () => {
        console.log("handling update")
    }

    
    


    const findCheckedOut = (array) => {
        var numChecked = 0;
 
        array.filter(arr => {
            if(arr.checkedOut){
                numChecked = numChecked + 1
            }
              
        })
     

        return numChecked
    }

    const [showCheckoutToast, setShowCheckoutToast] = useState(false)


    const toggleCheckToast = () => {
        setShowCheckoutToast(!showCheckoutToast)
    }



   

    


    /* EFFECT TO VALIDATE THE INFORMATION INSIDE THE CHECKOUT BOOKS FIELD */
    useEffect(() => {
        if(!copies){
          return   
        }

        if(checkoutCopiesNum > copies.length){
            alert("There isn't that much of this book available")
            return;
        }
        // console.log(numCheckedOut)
        if(checkoutCopiesNum > (copies.length - numCheckedOut)){
            setCheckoutCopiesNum(0)
            alert('You cannot checkout that many copies as there is already to many checked out')
            return;
        }


        // for(var i = 0; i < checkoutCopiesNum; i++){

        // }
        

    },[checkoutCopiesNum, numCheckedOut])




    return (
        book ? 
        copies ?
        <div>
        <Container>
            {/* Show the book icon with the title of the book underneath */}
            

            <div style={topOfPage}>
                <div style={topLeftBook}>
            
                    <FaBook style={bookIcon} size={200}/>
                    <h4 className="">{book.bookName}</h4>
                    
                </div>

                <Form style={topForm}>
                    <Row>
                        <Col className="pl-0">
                            <InputGroup className="mb-3 mt-3">
                                <InputGroup.Prepend>
                                    <InputGroup.Text id="basic-addon1">Book Name</InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl onChange={(e) => setBookName(e.target.value)}
                                    defaultValue={book.bookName}
                                    aria-label="Name"
                                    aria-describedby="basic-addon1"
                                />
                            </InputGroup>
                            <Form.Group controlId="exampleForm.ControlTextarea1">
                                
                                <Form.Control as="textarea" rows={5} defaultValue={book.bookDesc}/>
                            </Form.Group>
                        </Col>


                        <Col className="m-0 pr-0">
                            <InputGroup className="mb-4 mt-3">
                                <InputGroup.Prepend>
                                    <InputGroup.Text id="basic-addon1">ISBN</InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl onChange={(e) => setISBN(e.target.value)}
                                    defaultValue={book.ISBN}
                                    aria-label="Name"
                                    aria-describedby="basic-addon1"
                                />
                            </InputGroup>
                            <InputGroup className="mb-4 mt-4">
                                <InputGroup.Prepend>
                                    <InputGroup.Text id="basic-addon1">Total Copies</InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl onChange={(e) => setNewCopies(e.target.value)}
                                
                                    aria-label="Name"
                                    aria-describedby="basic-addon1"
                                    defaultValue={copies.length}
                                />
                            </InputGroup>
                            <InputGroup className="mb-4">
                                <InputGroup.Prepend>
                                    <InputGroup.Text id="basic-addon1">Total Checked Out</InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl onChange={(e) => setNewCopies(e.target.value)}
                                    
                                    aria-label="Name"
                                    aria-describedby="basic-addon1"
                                    defaultValue={findCheckedOut(book.copies)}
                                />
                            </InputGroup>
                            
                            
                        </Col>
                        <Button style={updateButtonStyle} onClick={handleUpdate}>Update</Button>
                    </Row>
                    
                </Form>
            </div>




            <Row style={{justifyContent: "space-between", verticalAlign: "middle"}}>
            
            <Toast 
                show={showCheckoutToast} 
                onClose={toggleCheckToast} 
                style={{
                    position: 'absolute',
                    top: 0,
                    right: 0,
                }}
            
            
            
            >
                <Toast.Header>
                    <img
                    src="holder.js/20x20?text=%20"
                    className="rounded mr-2"
                    alt=""
                    />
                    <strong className="mr-auto">Success!</strong>
                </Toast.Header>
                <Toast.Body>Successfully Checked out a Book</Toast.Body>
            </Toast>

            

                <div style={bottomOfPage}>
                    <Form style={bottomForm} onSubmit={submitCheckout}>
                        <InputGroup className="mt-4">
                        <InputGroup.Prepend>
                                <InputGroup.Text id="basic-addon4">Checkout Out Copies:</InputGroup.Text>
                                </InputGroup.Prepend>
                                
                                <FormControl
                                    onChange={(e) => setCheckoutCopiesNum(e.target.value)}
                                    placeholder={checkoutCopiesNum}
                                    aria-label="Name"
                                    aria-describedby="basic-addon1"
                                />
                        </InputGroup>

                        <Select
                            className="mt-4"
                            style={{width: "100%"}}
                            name="Select"
                            required
                            // loading
                            searchable
                            placeholder="To:"
                            options={allProfs}
                            onChange={(values) => {setProfChosen(values[0].value)}}
                        />
                        

                     
                        <DatePicker className="mt-4" selected={dueDate} onChange={date => setDueDate(date)} />
                      
                        
                        <Button type="submit" className="mt-3 w-100">Checkout</Button>

                    </Form>
                    
                </div>



                <BookIcoContext.Provider value={{iconState, setIconState}}>
                    <div style={booksRows} onClick={() => setIconState(true)} onMouseUp={() => setIconState(false)}>
                        {
                            
                            copies ? copies.map((copy, index) => {
                                return <div 
                                key={index}  
                                >
                                    <BookIconFunc 
                                        checkedOut={copy.checkedOut}
                                        ref={bookicoref[index]} 
                                    >
                                    </BookIconFunc>
                                </div>
                            }) 
                        
                        : 
                        
                        
                            <div>none</div>
                        }
                    </div>
                </BookIcoContext.Provider>
            </Row>
            


         
            
        </Container>
            <ColoredLine color="grey" m={20} height={1}/>
            <Container>
                {/* {book.whosChecked.map(prof => {
                    // console.log(prof)
                    // <Col>{prof}</Col>
                })} */}
                <CheckoutBookHistroy book_id={props.id} book={book} reRender={reRender}></CheckoutBookHistroy>
            </Container>
        </div>

        :

        <div>no data</div>

        :
        <div>no data</div>
    )

}