Question

我试图将电子邮件地址添加到我拥有的mailchimp列表中。

这是针对react本机应用程序，我尝试使用fetch实现请求。

这是我在组件中的代码：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, nameChanged, addToWaitingList } from '../actions';
import { Card, CardSection, Input, Button, Spinner } from '../components/Auth';

class addToWaitingListForm extends Component {

  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onButtonPress() {
    const { email } = this.props;

    this.props.addToWaitingList({ email });
  }

  renderButton() {
    if (this.props.loading) {
      return <Spinner size="large" />;
    }
    return (
      <Button onPress={this.onButtonPress.bind(this)}>
        Keep me in the loop!
      </Button>
    );
  }

  render() {
    return (
        <View>
          <Card>
            <CardSection>
              <Input
                placeholder="your name"
                onChangeText={this.onNameChange.bind(this)}
                value={this.props.name}
              />
            </CardSection>

            <CardSection>
              <Input
                placeholder="email@uni.ac.uk"
                onChangeText={this.onEmailChange.bind(this)}
                value={this.props.email}
              />
            </CardSection>

            <Text style={styles.errorTextStyle}>
              {this.props.error}
            </Text>

            <CardSection style={{ borderBottomWidth: 0 }}>
              {this.renderButton()}
            </CardSection>
          </Card>
        </View>
    );
  }
}

const mapStateToProps = ({ auth }) => {
  const { email, name, error, loading } = auth;

  return { email, name, error, loading };
};

export default connect(mapStateToProps, {
  emailChanged,
  addToWaitingList
})(addToWaitingListForm);

添加这是我与mailchimp api交互的操作代码：

import Router from '../../navigation/Router';
import { getNavigationContext } from '../../navigation/NavigationContext';

export const addToWaitingList = ({ email }) => {
  const emailListID = 'e100c8fe03';

  fetch(`https://us13.api.mailchimp.com/3.0/lists/${emailListID}/members/`, {
    method: 'POST',
    body: JSON.stringify({
      'email_address': email,
      'status': 'subscribed',
      'merge_fields': {
        'FNAME': 'Urist',
        'LNAME': 'McVankab'
      }
    })
  })
    .then(() => addSubscriberSuccess())
    .catch(error => console.log(error));
};

const addSubscriberSuccess = () => {
  getNavigationContext().getNavigator('root').immediatelyResetStack([Router.getRoute('auth')]);
};

目前，我刚刚回来的错误是ExceptionsManager.js:62 Cannot read property 'type' of undefined和Error: unsupported BodyInit type

这是什么意思，我该如何解决这个问题？

Answer 1

你需要做两件事。首先你需要通过fetch发送基本身份验证，这样你才能做到＆＃34; user：pass＆＃34;你必须用btoa转换它（＆＃39; user：pass＆＃39;）。

然后你必须用模式发送它：＆＃39; no-cors＆＃39;

    let authenticationString = btoa('randomstring:ap-keyxxxxxxx-us9');
    authenticationString = "Basic " + authenticationString;

    fetch('https://us9.api.mailchimp.com/3.0/lists/111111/members', {
      mode: 'no-cors',
      method: 'POST',
      headers: {
        'authorization': authenticationString,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email_address: "dude@gmail.com", 
        status: "subscribed",
      })
    }).then(function(e){
        console.log("fetch finished")
    }).catch(function(e){
        console.log("fetch error");
    })

为什么mailchimp API没有使用fetch？

1 个答案: