小编bp1*_*123的帖子

React Router 4 Match返回undefined

我正在使用反应路由器4,我无法使用params从URL访问id.我已经按照反应路由器4文档但是当我在console.log match.params.id时返回Cannot read property 'params' of undefined.URL包含id,所以我迷路了.你可以在中找到console.logPath: Container

我究竟做错了什么?

路径: App

const App = appProps => (
  <Router>
    <div className="bgColor">
      <NavBar {...appProps} />
      <Grid className="main-page-container">
        <Switch>
          <Admin exact path="/admin/candidate_profile/:id" component={AdminCandidateProfileContainer} {...appProps} />
        </Switch>
      </Grid>
    </div>
</Router>
);

App.propTypes = {
  loggingIn: PropTypes.bool,
  authenticatedCandidate: PropTypes.bool,
  authenticatedAdmin: PropTypes.bool
};


export default createContainer(() => {
  const loggingIn = Meteor.loggingIn();
  return {
    loggingIn,
    authenticatedCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'Candidate'),
    authenticatedAdmin: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'Admin')
  };
}, App); …
Run Code Online (Sandbox Code Playgroud)

reactjs react-router-v4

8
推荐指数
1
解决办法
5679
查看次数

如果您使用引导日期选择器,日期将消失

从github,dateExample中提取工作示例.

我之前已经问过这个问题,但是这个建议没有用,所以我创建了一个小例子.如果有人可以指出我正确的方向,我可以在网上提出并发布链接.这是一个流星应用程序.

问题

Autoform生成带日期的表单.该表单作为一个数组工作,并使用引导程序模板,该模板提供一些+-按钮addremove其他条目.当我使用aldeed:autoform-bs-datepicker表格内出现的奇怪问题时.如果您+-在保存之前输入日期并点击按钮,则日期将消失.如果你不使用autoform-bs-datepicker这个问题就消失了.

请参阅下面的代码,如果有办法,我可以在线发布示例,让我知道,我会这样做.

路径: packages.js

twbs:bootstrap
aldeed:collection2
aldeed:autoform
rajit:bootstrap3-datepicker
aldeed:autoform-bs-datepicker
Run Code Online (Sandbox Code Playgroud)

路径: Schemas.js

Classes = new Mongo.Collection("Classes");

var Schemas = {};

Schemas.DatesNotWorking = new SimpleSchema({
    name: {
        type: String,
        optional: true           
    },
    startDate: {
        type: Date,  
        optional: true,
        autoform: {
            type: "bootstrap-datepicker",
            "data-date-autoclose": "true",
            datePickerOptions: {
                format: "yyyy",
                startView: "years",
                minViewMode: "years"
            }
        }     
    },
    endDate: {
        type: Date,  
        optional: true,
        autoform: {
            type: "bootstrap-datepicker", …
Run Code Online (Sandbox Code Playgroud)

meteor meteor-autoform

6
推荐指数
1
解决办法
603
查看次数

项目错误 - 未捕获的ReferenceError:未定义Raven

我开始在chrome控制台中收到错误Uncaught ReferenceError: Raven is not defined.我不知道它是指什么或它来自哪里.当我在fireFox中打开项目时,不会出现错误.有人可以对此有所了解吗?

错误: Message

    Uncaught ReferenceError: Raven is not defined
        at HTMLDocument.<anonymous> (sidekick.js:1)
        at f (extension-lib.js:1)
        at Object.fireWith [as resolveWith] (extension-lib.js:1)
        at Function.ready (extension-lib.js:1)
        at HTMLDocument.xe (extension-lib.js:1)
    (anonymous) @   sidekick.js:1
    f   @   extension-lib.js:1
    fireWith    @   extension-lib.js:1
    ready   @   extension-lib.js:1
    xe  @   extension-lib.js:1
Run Code Online (Sandbox Code Playgroud)

meteor reactjs

6
推荐指数
1
解决办法
898
查看次数

反应路由器V4链接到外部地址

我尝试了一些不同的建议,但是似乎都没有用。我正在使用React Router V4,我想创建一个导航到外部网站的链接。目前,我所做的一切都只是附加到我的URL上。

我想发生的事情 www.mysite.com =>单击内部链接,然后转到=> www.newsite.com

发生了什么 www.mysite.com =>单击内部链接并转到新页面,但它会添加=>www.mysite.com/www.newsite.com

<Link to="http://www.newsite.com">Go to new site</Link>

react-router-v4

5
推荐指数
1
解决办法
2497
查看次数

使用挂钩时等待状态更新

我如何等待使用挂钩更新状态。提交表单时,我需要termsValidation在运行其他代码之前检查是否为假。如果状态刚刚改变,它就不会改变。

import React, { useState } from 'react';

export default function Signup() {
  const [terms, setTerms] = useState('');
  const [termsValidation, setTermsValidation] = useState(false);

  function handleSubmit(e) {
    e.preventDefault();

    if (!terms) {
      setTermsValidation(true);
    } else {
      setTermsValidation(false);
    }

    if (!termsValidation) {
      console.log('run something here');
    }
  }

  return (
    <div>
      <form>
        <input type="checkbox" id="terms" name="terms" checked={terms} />

        <button type="submit" onClick={handleSubmit}>
          Sign up
        </button>
      </form>
    </div>
  );
}
Run Code Online (Sandbox Code Playgroud)

reactjs

5
推荐指数
3
解决办法
2432
查看次数

在页面顶部打开<Link>

我正在使用React Router 4,当我使用<Link>新页面时,不会在页面顶部打开.我需要讲<Link>一些具体的内容吗?

<Link to="/mypage">My Page</Link>
Run Code Online (Sandbox Code Playgroud)

react-router-v4

4
推荐指数
3
解决办法
5048
查看次数

MUI V5 变体覆盖

我正在尝试添加到 MUIPaper 中的变体,但我不确定我做错了什么。组件上的类型有:

variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;
Run Code Online (Sandbox Code Playgroud)

如何使用 PaperPropsVariantOverrides 扩展变体属性。我的预期结果是:

variant?: 'elevation' | 'outlined' | 'grey' | 'white',
Run Code Online (Sandbox Code Playgroud)

成分:Paper.tsx

import React from 'react';
import MUIPaper, { PaperProps as MuiPaperProps } from '@mui/material/Paper';
import { PaperPropsVariantOverrides } from '@mui/material';

export interface PaperPropsVariantOverrides {
  variant: 'grey' | 'white';
}

export type PaperProps = MuiPaperProps;

const Paper: React.FC<PaperProps> = (props) => {
  const { ...paperProps } = props;

  return <MUIPaper variant="grey" {...paperProps} />;
};
export default Paper;
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui

4
推荐指数
1
解决办法
4608
查看次数

使用 Momentjs 比较两个日期

我正在尝试比较两个日期。我想检查一个日期是否在另一个日期之前。我正在使用 momentjs,我所做的一切似乎都会返回false。任何帮助,将不胜感激。

Format - [Month, Year]
moment([0, 2012]).isBefore([1, 2013]);
Run Code Online (Sandbox Code Playgroud)

momentjs

2
推荐指数
1
解决办法
9419
查看次数

如何在我的 React linter 中修复“声明的道具类型中的错字:标题”?

我目前使用 ESLint、Airbnb lint 和 Prettier 来控制代码样式。我在header.propTypes下面的标题中遇到错误。我看过文档,但我不理解解决方案。这是一个 React 项目。

错误是:

声明的道具类型中的错字:标题

我在这里做错了什么?

export default function Header(props) {
  const { title } = props;
  return (
    <Helmet>
      <title>{title}</title>
    </Helmet>
  );
}

Header.propTypes = {
  title: PropTypes.title.isRequired
};
Run Code Online (Sandbox Code Playgroud)

eslint eslint-config-airbnb prettier

2
推荐指数
1
解决办法
2708
查看次数

PDF 打开时是空白的

我已经在这里待了几个小时,但我什么也没有得到。我正在尝试从我的服务器下载 PDF 文件。我目前正在本地主机上运行它。当我打开 PDF 时,PDF 是一个白色的空白页。有人可以让我知道我错过了什么。我已经检查了保存在服务器上的 PDF,它很好。

应用程序 - 反应,表达。

NPM - Axios,文件保护程序,html-pdf

小路 - Front end React

.then(() =>
  axios.get(
    'http://localhost:3000/retailers/fetch/pdf',
    {
      headers: {
        'Content-type': 'application/json',
        'x-auth-token': this.props.token
      }
    },
    { responseType: 'blob' }
  )
)
.then((res) => {
  console.log('dd', res);
  const pdfBlob = new Blob([res.data], { type: 'application/pdf' });

  saveAs(pdfBlob, 'newPdf.pdf');
});
Run Code Online (Sandbox Code Playgroud)

小路 - Backend express

const options = {
  root: path.join(__dirname, '../'),
  dotfiles: 'deny',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true
  }
};

var fileName = 'test.pdf';
res.sendFile(fileName, …
Run Code Online (Sandbox Code Playgroud)

javascript blob express reactjs filesaver.js

2
推荐指数
1
解决办法
910
查看次数

使用 puppeteer 循环浏览列表并单击按钮

我正在尝试使用 puppeteer 来:

  • ul从列表创建数组
  • 循环浏览列表并单击一个按钮。
  • 每次单击按钮都会打开一个模式。在模式中,必须单击另一个按钮。
  • 在继续之前延迟下一个循环。

我尝试使用多种方法来做到这一点,page.evaluate但我的数组似乎总是空的。有人可以告诉我我在这里做错了什么吗?

<ul>
  <li><button>Connect</button></li>
  <li><button>Wait</button></li>
  <li><button>Connect</button></li>
  <li><button>Connect</button></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

小路:puppeteer.js

const buttons = await page.evaluate(() =>
  Array.from(document.querySelectorAll("ul > li button"))
);

for (let button of buttons) {
  if (button.innerText === "Connect") {
    button.click();
    document
      .querySelector(
        "div.artdeco-modal"
      )
      .click();
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript node.js puppeteer

1
推荐指数
1
解决办法
5478
查看次数