错误：React.Children.only 期望接收单个 React 元素子元素

Question

我正在开发一个简单的 MERN 堆栈应用程序，它与待办事项列表非常相似。

有一次，我添加了下面的组件，我开始收到这个错误：“错误：React.Children.only 期望接收单个 React 元素子项。” 此外，当我注释掉整个元素时，错误消失了。

const RentalItem = ({ rental, onDeleteClick, onRentClick }) => {
    return (
        <Container>
            <ListGroup>
                <ListGroupItem>
                    <TransitionGroup>
                        <CSSTransition key={rental._id} timeout={1500} classNames="fade">
                            <p className="align-items-center mb-1">
                                {rental.name} / {rental.bikeType} / $ {rental.price}/hr
                            </p>
                            {!rental.isRented ? (
                                <div>
                                    <Button
                                        className="btn btn-primary"
                                        onClick={() => {onRentClick(rental._id)}}
                                    >
                                        Rent
                                    </Button>
                                    <Button
                                        className="btn btn-danger"
                                        onClick={() => {onDeleteClick(rental._id)}}
                                    >
                                        Delete
                                    </Button>
                                </div>
                            ) : (
                                <div>
                                    <Button
                                        className="btn btn-danger"
                                        onClick={() => {onRentClick(rental._id)}}
                                    >
                                    Cancel rent
                                    </Button>
                                </div>
                            )}
                        </CSSTransition>
                    </TransitionGroup>
                </ListGroupItem>
            </ListGroup>
        </Container>
    );
};

当我在浏览器中收到错误时，它指向 redux 操作代码：

export const getRentals = () => dispatch => {
    dispatch(setRentalsLoading());
    axios.get("/api/rentals").then(res => 
        dispatch({
            type: GET_RENTALS,
            payload: res.data
        })
    )
}

请帮助新手:)

Answer 1

当你使用 CSSTransition 时，你应该只传递一个孩子，你可以用 Fragment 组件包装你的代码：

<CSSTransition key={rental._id} timeout={1500} 
    <>
       // your code is here
    </>
</CSSTransition>

请让我知道是否清楚