React.js-函式作為React子級無效

我是 React.js 的新手。我無法解決問題。我收到此警告：函式作為 React 子級無效。如果您回傳一個組件而不是從渲染中回傳，則可能會發生這種情況。或者，也許您打算呼叫此函式而不是回傳它。

應用程式.js

`

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) => {
        axios.delete(`http://localhost:3002/movies/${movie.id}`)
        const newMovieList = this.state.movies.filter(
            m => m.id !== movie.id
        )
        this.setState(state => ({
            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 const searchMovieProp={this.searchMovie()} />
                                    </div>
                                </div>
        
                                <MovieList
                                    movies={filteredMovies()}
                                    deleteMovieProp={this.deleteMovie()} 
                                />
                            </React.Fragment>
                        )}>
                        </Route>

                        <Route path='/add' element={<AddMovie />} />
                    </Routes>   
                </div>
            </Router>
        )
    }
}
export default App;

`

我究竟做錯了什么？

提前致謝。

uj5u.com熱心網友回復：

像您一樣將函式傳遞給路由：

<Route path='/' exact element={() =>(
  <React.Fragment>
    <div className="row">
      <div className="col-lg-12">
        <SearchBar const searchMovieProp={this.searchMovie()} />
      </div>
    </div>
    <MovieList
      movies={filteredMovies()}
      deleteMovieProp={this.deleteMovie()} 
    />
  </React.Fragment>
)}>

看起來像路由器 v5 語法。這在 v6 中不起作用：您應該傳遞一個元素，這與生成元素的函式不同。像這樣的東西會起作用：

<Route path='/' exact element={(
  <React.Fragment>
    <div className="row">
      <div className="col-lg-12">
        <SearchBar const searchMovieProp={this.searchMovie()} />
      </div>
    </div>
    <MovieList
      movies={filteredMovies()}
      deleteMovieProp={this.deleteMovie()} 
    />
  </React.Fragment>
)}>

uj5u.com熱心網友回復：

我的猜測是您沒有在 Router 元素道具中回傳元素。試著用花括號把它包起來，所以改變這個

<Route path='/' exact element={() =>( ... )} />

to this:

<Route path='/' exact element={() =>{( ... )}} />

標籤：javascript反应

上一篇：在控制臺中出現警告并且我的顯示串列功能/組件不起作用

下一篇：在react-query中的onMutate更新后執行DOM操作