рендеринг на стороне клиента не происходит одновременно и требует рендеринга sh для рендеринга, в то время как рендеринг на стороне сервера - PullRequest
Новая
       35

рендеринг на стороне клиента не происходит одновременно и требует рендеринга sh для рендеринга, в то время как рендеринг на стороне сервера

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

Любая идея, где проблема в том, что этот код не отображается сначала на стороне сервера и нуждается в refre sh, а затем начинает отображение. Щелчок по одному элементу на странице RecipePage предполагает переадресацию на страницу сведений об этом конкретном элементе c. В этом коде каждый первый щелчок после обновления RecipePage выдает эту ошибку :act_devtools_backend. js: 6 Ошибка: ошибка Minified React # 31; visit и const mapStateToProps страницы сведений отправляет пустой файл state.detail на стороне клиента, тогда как на стороне сервера существуют правильные данные. После одной ссылки sh на странице сведений клиентская сторона начинает работать до следующей ссылки sh на RecipePage.

сервер. js

const app = express();
app.use(cors());
app.options('*', cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 

app.use("/", index);
app.use(express.static("public"));


app.get("*", (req, res, next) => {

const store = createStore(reducers, {}, applyMiddleware(thunk));
const promises = matchRoutes(Routes, req.path).map(({ route,match }) => {
   return route.loadedData ? route.loadedData(store,match.params._id) : null;
 });

Promise.all(promises).then((a) => {
const home = renderToString(
  <Provider store={store}>
    <StaticRouter context={{}} location={req.path}>
      <div>{renderRoutes(Routes)}</div>
    </StaticRouter>
  </Provider>
);

res.send(
  `
   <!DOCTYPE HTML>
   <html lang="en">
   <head>
   <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
   <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" 
    rel="stylesheet" >
   <link href="https://fonts.googleapis.com/css2? 
    family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2? 
     family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
   <link href="style.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="#">
   <script src="https://kit.fontawesome.com/a076d05399.js"></script>

    <title>server</title>

    </head>

    <body>

  <div id="root">${home}</div>
  <script>
  window.INITIAL_STATE = ${serialize(store.getState())}
</script>
  <script src="bundle.js" charset="utf-8"></script>
</body>
</html>
`
);
});


});

mongoose
 .connect(
"mongodb+srv://laily:<password>.mongodb.net/page?retryWrites=true",
{ useNewUrlParser: true, useUnifiedTopology: true }
)
  .then((result) => {
 app.listen(4000, () => console.log("yesssssss"));
 })
 .catch((err) => {
  console.log(err);
 });

это деталь. js

 class Detail extends Component {


 componentDidMount() {
  console.log(this.props.match.params,"paramsssss offffffdetasillll,this.props.location")
  this.props.fetchRecipeDetail(this.props.match.params._id);
 }

fetchProp(){
  return <div>{this.props.detail}</div>

}

render() {
return (
  <div>

    {this.fetchProp()}

  </div>
  );
  }
 }


 const mapStateToProps = (state) => {
 return {
  detail: state.detail,
 };
};

 const loadedData = (store,id) => {

 return store.dispatch(fetchRecipeDetail(id));
 };
  export default {
   loadedData,
   component:  connect(mapStateToProps, { fetchRecipeDetail })(Detail)
  }

Это маршруты 

 export default [
                 {
            ...App,
             routes: [

            {

        ...Home,
        path: '/',
        exact: true,

       },
      {
       ...AddRecipe,
       path: '/add-newrecipe',
      },
      {
      ...RecipePage,
       path: '/all-recipes',
      },
      {
      ...Detail,
      path: '/:_id',

      },
      {
      ...NotFound
      }


     ]
     } ]

это часть действия 

    export const FFETCH_RECIPE_DETAIL = 'fetch_recipe_detail';
    export const fetchRecipeDetail = (id) => async (dispatch) => {

    const res= await axios.get(`http://localhost:4000/data/${id}`)



     dispatch({
        type: FFETCH_RECIPE_DETAIL,
        detail:res.data,
     });

    };

это редуктор 

import { FFETCH_RECIPE_DETAIL  } from '../actions';

export default (state = {}, action) => {
  switch (action.type) {
  case FFETCH_RECIPE_DETAIL :
  return action.detail.recipe._id;
  default:
  return state;
 }
  };
...