offcanvas 组件内的错误 setState 调用

Question

我在侧边栏 bootstrap offcanvas 组件中收到错误的 setState() 错误。它说它无法在呈现不同组件 sidebar() 时更新组件 App() 对不起，但我不得不删除我的大部分代码，这是一个获取调用。谢谢

错误：index.js:1 Warning: Cannot update a component (App) while rendering a different component (Sidebar). To locate the bad setState() call inside Sidebar, follow the stack trace as described in

App.js

import React, {useEffect, useState} from 'react';
import './App.css';
import MovieTag from "./components/MovieTag/MovieTag";
import Sidebar from "./components/MovieTag/Sidebar";

interface Movie {
    id: number,
    poster_path: string,
    title: number
}

function App() {
    const [movies, setMovies] = useState([]);
    const [genre, setGenre] = useState(0);
    const [sort, setSort] = useState("popularity.desc");
    const [page, setPage] = useState(1);
    function GetMovies(genreId: number, sortBy: string, page: number){
        setGenre(genreId);
        setSort(sortBy);
        setPage(page);
    return (
        <div className={'container'}>
            <Sidebar filterByGenre={(genre: number) => {
                setGenre(genre);
            }}
                     sortBy={(sort: string) => {
                         setSort(sort);
                     }}
                     pageFilter={(page: number) => {
                         setPage(page);
                     }}
            />
                <div className={'row'}>
                    {movies.map((movie: Movie) => {
                        return (
                            <MovieTag key={movie.id}
                                      poster={movie.poster_path}
                                      title={movie.title}
                            />
                        )
                    })}
                </div>
        </div>
    );
}
export default App;

Sidebar.js

function Sidebar(props: any) {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
        <React.Fragment>
            <Button variant={'secondary'} onClick={handleShow}>Filter</Button>
            <Offcanvas show={show} onHide={handleClose}>
                <Offcanvas.Header>
                    <Offcanvas.Title>Filter</Offcanvas.Title>
                </Offcanvas.Header>
                <Offcanvas.Body>
                    <DropdownButton title={'Genre'} drop={'end'}>
                        <Dropdown.Item eventKey={1}><button onClick={props.filterByGenre(28)}>Action</button></Dropdown.Item>
                    </DropdownButton>
                </Offcanvas.Body>
            </Offcanvas>
        </React.Fragment>
    )
}

Answer 1

问题出在 Sidebar 组件上，该组件在 <Dropdown.Item eventKey={1}><button onClick={props.filterByGenre(28)}>Action</button></Dropdown.Item>

上渲染时调用其父组件的 setState

如果需要调用onClick函数，那么为其创建一个箭头函数。

onClick={() => props.filterByGenre(28)}

offcanvas 组件内的错误 setState 调用

Bad setState call inside offcanvas component

bootstrap-modal

reactjs

off-canvas-menu