Решение проблемы с компонентом, который не перерисовывается после обновления - PullRequest
Новая
       14

Решение проблемы с компонентом, который не перерисовывается после обновления

0 голосов
/ 07 марта 2020

У меня есть компонент Dashboard, который получает состояние от редуктора и затем отображает информацию об учетной записи для пользователя на основе состояния. Компонент прекрасно рендерится при первом рендеринге. Однако, когда я обновляю sh страницу, все исчезает, ничего не рендерится. Я подумал, что это может быть проблемой с моим хуком useEffect, и эту проблему можно решить, поместив туда какое-то значение в массиве зависимостей. Однако я понимаю, что даже если бы проблема заключалась в том, что части компонентов JSX, которые не зависят от ловушки useEffect, должны по-прежнему отображаться. Даже этого не происходит, я ничего не получаю по refre sh. Как я могу решить эту проблему?

Вот ссылка на проект на Github: https://github.com/jevoncochran/Food-Truck-TrackR

Вот компонент: 

const Dashboard = props => {
    const [accountInfo, setAccountInfo] = useState({});

    useEffect(() => {
            axiosWithAuth()
                .get(`/operator/${props.id}`)
                .then(res => {
                    // console.log(res);
                    setAccountInfo(res.data);
                })
                .catch(err => console.log(err))
    }, [props.id])

    return (
        <div>
            <h1>This is the Dashboard component</h1>
            <h2>Welcome, {accountInfo.username}</h2>
            <h3>Your Trucks</h3>
            {accountInfo.trucks && accountInfo.trucks.map(truck => (
                <div key={truck.id}>
                    <p>{truck.name}</p>
                    <p>{truck.cuisine_type}</p>
                    <p>{truck.physical_address}</p>
                    <br/>
                </div>
            ))}
        </div>
    )
}

const mapStateToProps = state => {
    return {
        id: state.account.id,
        username: state.account.username,
        email: state.account.email
    }
}

export default connect(mapStateToProps, {})(Dashboard);

РЕДАКТИРОВАТЬ: Это как компонент Dashboard отображается. После прочтения комментариев других людей кажется, что после refre sh я теряю state.account.id, из-за чего я теряю dynamicRoute в App. js, что приводит к сбою рендеринга компонента Dashboard. Кто-нибудь видит решение этой проблемы: 

function App(props) {
  console.log(props);
  const dynamicRoute = `/api/vendor/${props.accountId}`

  return (
    <Router>
      <div className="App">
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <PrivateRoute path={dynamicRoute} component={Dashboard} />
      </div>
    </Router>
  );
}

1 Ответ

1 голос
/ 11 марта 2020

Было несколько способов решить эту проблему. Одна из них заключалась в том, чтобы иметь действие, которое выполняло бы вызов API, чтобы получить информацию, необходимую мне для компонента Dashboard, и запускать это действие, если когда-либо состояние избыточности возвращалось неопределенным, что происходит при refre sh. Там также избыточно-персистировать. В конечном итоге я решил использовать redux-persist для решения этой проблемы, документацию по которой можно найти здесь: https://github.com/rt2zz/redux-persist. Вот код из index.js:

Соответствующий импорт: 

import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { PersistGate } from "redux-persist/integration/react";

// set up to persist redux state on refresh
const persistConfig = {
    key: 'root',
    storage
};

const persistedReducer = persistReducer(persistConfig, truckReducer);

// async middleware (thunk) and logger has to go here
let store = createStore(persistedReducer, applyMiddleware(thunk, logger));

let persistor = persistStore(store);

ReactDOM.render(
    <Provider store={store}>
        {/* wrap component in PersistGate for redux persist to take effect */}
        <PersistGate loading={null} persistor={persistor}>
            <Router>
                <App />
            </Router>
        </PersistGate>
    </Provider>, 
    document.getElementById('root')
);
...