Блог

Главная - Вопросы по программированию - react setSelectedGame-это не функция

react setSelectedGame-это не функция

#reactjs

Вопрос:

App.js

 import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './components/Home';
import Navbar from './components/Navbar';
import Game from './components/Game'
import {useState, useEffect} from 'react'

function App() {
  const [selectedGame, setSelectedGame] = useState('/')

  return (
    <div className="App">
      <Navbar />
      <div className='container'>
        <Router>
          <Switch>

            <Route exact path='/' setSelectedGame={setSelectedGame}> // <----------------
              <Home />
            </Route>

            <Route path={`/games/${selectedGame}`}>
              <Game />
            </Route>
          </Switch>
        </Router>
      </div>
    
    </div>
  );
}

export default App;

Home.js

 import axios from 'axios'
import React from 'react'
import { useState, useEffect } from 'react'
import {useHistory} from 'react-router-dom'

const Home = ({setSelectedGame}) => {
    const [previews, setPreviews] = useState([])
    const [images, setImages] = useState('')

    const history = useHistory()

    const redirectGame = title => {
        setSelectedGame(title) // <-----------------
        history.push(`/games/${title}`)
    }

    return (
        <div class="container">
        <section class="games">

        {previews.map(preview => (
                <div class="game">
                <div class="game-content">
                    <div class="thumbnail">
                        <div class="image-container" onClick={() => redirectGame(preview.title)}>
                            <img 
                            src={`http://127.0.0.1:8000/api/previews/thumbnail/${preview.id}`} className='cover'
                            />
                        </div>
                    </div>
                </div>
            </div>
            ))}

        </section>

        </div>
    )
}

export default Home

Я пытаюсь сделать следующее: когда пользователь нажимает на контейнер с изображением, он берет заголовок и отправляет его своему родительскому компоненту, который App.js который будет сохранен в выбранном состоянии игры с помощью функции redirectGame (), расположенной в Home.js,до сих пор это работало совершенно нормально … как я могу это исправить?

Комментарии:

1. С какой проблемой вы столкнулись прямо сейчас?

2. Я не могу отправить заголовок, который находится в Home.js к родительскому компоненту App.js

3. просто строка, допустим, название игры-Тетрис, когда пользователь нажимает на нее, мне нужно, чтобы значение «Тетрис» было отправлено App.js

4. Вам нужно перейти setSelectedGame к своему Home компоненту, а не Route .

Ответ №1:

 <Route exact path='/' >
   <Home setSelectedGame={setSelectedGame}  />
</Route>
Метки: