React警告：Functions are not valid as a React child，求问题排查解决

你遇到的Functions are not valid as a React child警告，核心原因是在render过程中把函数调用的结果（而非合法的React元素/值）当成了子元素传递，同时代码里还有几处语法和逻辑错误，具体问题和修复如下：

错误点1：传递props时错误调用函数 #

• searchMovieProp={this.searchMovie()}：你需要传递的是函数本身（供子组件触发调用），而不是直接调用函数。this.searchMovie()会在每次render时执行，返回undefined，还会引发不必要的状态更新。
• deleteMovieProp={this.deleteMovie()}：deleteMovie是async函数，调用后返回Promise对象，这个对象会被React当成子元素处理，直接触发警告。

错误点2：错误调用数组变量 #

movies={filteredMovies()}：filteredMovies是你在render里定义的数组变量，不是函数，加()会报错，直接传递数组即可。

错误点3：组件props前错误添加const #

<SearchBar const searchMovieProp={...} />：这里的const完全多余，属于语法错误，直接写props名即可。

错误点4：Route的element属性无需嵌套箭头函数 #

element={() =>(...)}：element属性可以直接接收JSX元素，不需要用箭头函数包裹，包裹后反而可能引发不必要的重渲染问题。

修正后的完整代码 #

import React from 'react';
import MovieList from './MovieList';
import SearchBar from './SearchBar';
import AddMovie from './AddMovie';
import axios from 'axios'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

class App extends React.Component {
    state = {
        movies: [],
        searchQuery: ""
    }

    async componentDidMount() {
        const response = await axios.get("http://localhost:3002/movies")
        this.setState({movies: response.data})
    }

    deleteMovie = async (movie) => {
        await axios.delete(`http://localhost:3002/movies/${movie.id}`) // 建议加await，确保删除请求完成后再更新状态
        const newMovieList = this.state.movies.filter(
            m => m.id !== movie.id
        )
        this.setState({
            movies: newMovieList
        })
    }

    searchMovie = (event) => {
        this.setState({searchQuery: event.target.value })
    }

    render() {
        let filteredMovies = this.state.movies.filter(
            (movie) => {
                return movie.name.toLowerCase().indexOf(this.state.searchQuery.toLowerCase()) !== -1
            }
        )

        return (
            <Router>
                <div className="container">
                    <Routes>
                        <Route path='/' exact element={
                            <React.Fragment>
                                <div className="row">
                                    <div className="col-lg-12">
                                        <SearchBar searchMovieProp={this.searchMovie} />
                                    </div>
                                </div>
                                <MovieList
                                    movies={filteredMovies}
                                    deleteMovieProp={this.deleteMovie} 
                                />
                            </React.Fragment>
                        } />
                        <Route path='/add' element={<AddMovie />} />
                    </Routes>   
                </div>
            </Router>
        )
    }
}
export default App;

额外补充：deleteMovie函数里的axios.delete建议加上await，确保后端删除操作完成后再更新前端状态，避免出现数据不一致的情况。

内容的提问来源于stack exchange，提问作者LQuixote