zoukankan      html  css  js  c++  java
  • react+next.js遇到的问题及解决

    1.使用react-image插件做图片预览,报错:window is not defined。

    因为next.js使用的是服务端渲染,没有window。

    解决方法是引入的时候,加一个对象 {SSR:false}。

    import dynamic from 'next/dynamic'
    let Zmage = dynamic(import('react-zmage'), { ssr: false })

     

    2.使用this.props.router.query获取不到查询参数。

    本地能获取地址栏的参数,但是线上就获取不到。

    因为本地开了服务,线上是静态资源,没开服务,所以获取不到。

    可以改为window.location来获取并做处理。

    封装成一个工具类,随时可以引入使用。

    export const getPageQuery = () => {
      const queryStr = window.location.href.split('?')[1];
        const queryArr = queryStr.split('&');
        const queryObj = {};
        queryArr.forEach(d => {
          const arr = d.split('=');
          if (arr[0]) {
            queryObj[arr[0]] = arr[1];
          }
        });
      return queryObj
    }

    3.使用window.location拿地址栏的数据,数字和字母可以直接解析。

    中文需要转码,否则拿到的是一串编码后的数据。

    如下图,分别是地址栏的数据,以及从地址栏拿到的数据。

    编码方式 let str=encodeURI (数据)

    解码 let a=decodeURI (数据)

     

    (3参考:https://blog.csdn.net/weixin_41863239/article/details/82083734?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control)

     

     

  • 相关阅读:
    一元回归1_基础(python代码实现)
    fisher's exact test
    卡方检验(python代码实现)
    Hough transform(霍夫变换)
    【算法】怎样把一个单链表反序?
    HTTP请求格式和HTTP响应格式
    TCP/IP、SOCKET、HTTP之间的联系与区别
    Graphical vi-vim Cheat Sheet and Tutorial
    Linux远程上传、下载文件的方法
    matlab工作空间,变量的保存和载入
  • 原文地址:https://www.cnblogs.com/afafaa/p/14217661.html
Copyright © 2011-2022 走看看