Не отправлять действие на маршрутизацию в реакцию - PullRequest
Новая
       36

Не отправлять действие на маршрутизацию в реакцию

0 голосов
/ 30 апреля 2020

У меня есть компонент под названием OneUser, у меня есть поле ввода и кнопка, при нажатии на эту кнопку я получу новый заголовок из API и перенаправлю на новую страницу, заголовок будет показан в этом компоненте с именем Display.

То, что происходит сейчас, при нажатии кнопки подтверждения происходит маршрутизация, но вызов API не работает.

Пожалуйста, предложите соответствующий ответ для меня

Состояние logi c работает хорошо, поэтому я не написал здесь.

Приложение. js

import React from 'react';
import './App.css';
import OneUser from './Components/OneUser';
import Display from './Components/Display';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import store from './store'
import {Provider} from 'react-redux'



function App() {
  const isAuthenticated = true



  return (
    <Provider store={store}>
    <Router>
      <div className="App">

          <Switch>
            <Route path='/' exact  component={OneUser}/>
            <Route path='/post' exact  component={Display}/>
          </Switch>
    </div>     
  </Router>
  </Provider>
  );
}

export default App;


OneUser.js


import React , {useState, useEffect} from 'react'
import {oneFetchData} from '../redux/oneAction'
import {connect} from 'react-redux'

function OneUser({user,oneFetchData, history}) {


    const [id,setId] = useState(1)
    const [IdFromButton,setIdFromButton] = useState(1)
    const submit = () =>  {

        setIdFromButton(id);
        history.push("/post")

    }
    useEffect( () =>{

        oneFetchData(id)
    },[IdFromButton]

    )


    return(
        <div>
            <input type="text" value={id} onChange={e=> setId(e.target.value)}>
            </input>
            < button onClick={submit}>Fetch Post</button> 

        </div>
    )
}

const gettingValue = state => {
    return{
        user: state.data
    }
}
const callingAction = dispatch => {
    return{
        oneFetchData: (id)=> 
            dispatch(oneFetchData(id))
            console.log('dispatched') //  not dispatching here function

    }
}

Display.js

import React from 'react'
import {useSelector} from 'react-redux'

function Display({history}) {


    const user = useSelector( state => state.data)

    return (
        <div>
            <h1>

                Title from another component - {user.title}

            </h1>
        </div>
    )
}


export default Display

1 Ответ

0 голосов
/ 30 апреля 2020

Я думаю, что ваш компонент может быть отключен до изменения состояния. Чтобы это исправить, вы должны вызвать history.push после изменения IdFromButton. 

const [id,setId] = useState(1)
const [IdFromButton,setIdFromButton] = useState(1)
const submit = () =>  {
    setIdFromButton(id);
}
useEffect( () =>{
    oneFetchData(id)
    history.push("/post")
},[IdFromButton]

)
...