小编Ars*_*riq的帖子

当'Content-Type'设置为'application/json'时,无法发送帖子请求

我正在研究React应用程序,我正在使用fetch来发送请求.我最近制作了一个Sign Up表单,现在我正在将它与它的API集成.以前,API接受了url编码数据,并且一切正常.但是现在需求已经改变并且API接受JSON中的数据,我不得不将内容类型头从'application/x-www-form-urlencoded'更改为'application/json'.但是我收到以下错误:

Fetch API无法加载http://local.moberries.com/api/v1/candidate.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:3000 '访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

我甚至在API中设置了"Access-Control-Allow-Headers",但它仍然无效.以下是客户端的相关代码:

sendFormData() {
    let {user} = this.props;

    var formData = {
      first_name: ReactDOM.findDOMNode(this.refs.firstName).value,
      last_name: ReactDOM.findDOMNode(this.refs.lastName).value,
      city: ReactDOM.findDOMNode(this.refs.currentCity).value,
      country: ReactDOM.findDOMNode(this.refs.currentCountry).value,
      is_willing_to_relocate: user.selectedOption,
      cities: relocateTo,
      professions: opportunity,
      skills: skills,
      languages: language,
      min_gross_salary: minSal,
      max_gross_salary: maxSal,
      email: ReactDOM.findDOMNode(this.refs.email).value,
      password: ReactDOM.findDOMNode(this.refs.password).value
    };

    var request = new Request('http://local.moberries.com/api/v1/candidate', {
      method: 'POST',
      mode: 'cors',
      headers: new Headers({
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
    });

    var requestBody = JSON.stringify(formData);

    console.log(requestBody);

    fetch(request, {body: requestBody})
      .then(
        function (response) {
          if (response.status …
Run Code Online (Sandbox Code Playgroud)

json content-type fetch cors reactjs

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

在Draft.js中制作项目符号

我正在使用Draft.js向我的React应用程序引入文本编辑器.我已经使它适用于粗体,斜体和下划线,但我无法弄清楚如何将文本更改为项目符号.我已阅读文档,但找不到任何有用的信息.有人可以帮忙吗?

reactjs draftjs

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

在React.js中放大和缩小图像

我正在使用react-image-gallery来查看页面上的图像.现在我需要在按钮点击时实现放大和缩小功能.我已经对react-gallery-gallery的文档进行了详尽的阅读,但我找不到任何有用的信息.有一个名为renderCustomControls的道具,我用它来显示左上角的缩放功能按钮,如下所示:截图

但我不知道如何做到这一点.任何形式的帮助将不胜感激.这是一些相关的代码:

export class CVPreview extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      images: []
    }

    this.renderCustomControls = this.renderCustomControls.bind(this)
  }

  renderCustomControls() {
    return(
      <span>
        <FloatingActionButton mini={true} secondary={true}>
          <ContentAdd />
        </FloatingActionButton>
        <FloatingActionButton mini={true} secondary={true}>
          <ContentRemove />
        </FloatingActionButton>
      </span>
    )
  }

  render() {
    const { openCVPreviewModal, onRequestClose } = this.props

    return (
      <Dialog
        className="cv-preview"
        titleClassName="cv-preview-title"
        contentClassName="cv-preview-content"
        bodyClassName="cv-preview-body"
        modal={false}
        open={openCVPreviewModal}
        autoDetectWindowHeight={false}
        onRequestClose={onRequestClose}>
        <IconButton
          className='close-icon'
          onClick={onRequestClose}>
          <ClearIcon />
        </IconButton>
        {
          this.state.images.length > 0 &&
          <ImageGallery
            items={this.state.images}
            renderItem={this.renderItem}
            renderLeftNav={this.renderLeftNav}
            renderRightNav={this.renderRightNav}
            showThumbnails={false}
            showPlayButton={false} …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-redux

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

Jest 单元测试调用返回 Promise 的函数的函数

我有一个函数调用一个返回 Promise 的函数。这是它的代码:

export const func1 = ({
  contentRef,
  onShareFile,
  t,
  trackOnShareFile,
}) => e => {
  trackOnShareFile()
  try {
    func2(contentRef).then(url => {
      onShareFile({
        title: t('shareFileTitle'),
        type: 'application/pdf',
        url,
      })
    }).catch(e => {
      if (process.env.NODE_ENV === 'development') {
        console.error(e)
      }
    })
    e.preventDefault()
  } catch (e) {
    if (process.env.NODE_ENV === 'development') {
      console.error(e)
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

而且func2,被称作func1是这样的:

const func2 = element => {
  return import('html2pdf.js').then(html2pdf => {
    return html2pdf.default().set({ margin: 12 }).from(element).toPdf().output('datauristring').then(pdfAsString => {
      return pdfAsString.split(',')[1]
    }).then(base64String …
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing reactjs jestjs

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

在react-highcharts中动态更改系列数据,而无需重新呈现图表

我用了创建折线图react-highcharts.它有3个系列和不同的数据.我有一个范围选择器,可以动态更改系列的数据.该图表如下所示:CRG 它工作得很好,但问题是每当我更改范围选择器上的风险值时,图表会重新呈现新系列的数据.我不希望它每次都重新渲染.我希望系列的数据随动画变化.像这样的东西:实时随机数据.这是我的相关代码:

class ContributionRiskGraph extends React.Component {
  constructor() {
    super();

    this.state = {
      riskValue: 8.161736
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({
      riskValue: value
    });
  }

  render() {
    const riskValue = this.state.riskValue / 100;
    const LBData = getGraphPlotData(riskValue, 'lowerBound');
    const EVData = getGraphPlotData(riskValue, 'expectedValue');
    const UBData = getGraphPlotData(riskValue, 'upperBound');

    const config = {
      chart: {
        animation: {
          duration: 1000
        }
      },
      title: {
        text: 'Contribution Risk Graph'
      },
      series: [
        {
          name: 'Lower Bound',
          data: …
Run Code Online (Sandbox Code Playgroud)

javascript charts highcharts reactjs

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