javascript - 单击 "Buy Now"按钮时，ajax post 应将数据发送到路由 "/buy"

Question

我正在尝试弄清楚如何在单击“立即购买”按钮时使用单选按钮从表单中提取数据。我知道在 react 中你可以获取值并设置状态，但我正在尝试使用一个 ajax 调用，我不是 100% 了解如何设置它。我尝试关注 axios github 页面，但我更困惑。我缺少依赖项，因为那是我的错误消息所说的。如果有人能弄清楚这是如何设置的，那就太好了!

这是我的错误信息:

这是我的 App.js，我的点击功能所在:

import React, { Component } from "react";
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import axios from "axios";
import eyewearData from "./data/eyewear.json";
import Header from "./components/Header";
import EyewearContent from "./components/EyewearContent";
import Buy from "./components/Buy";
import SelectEyewearPage from "./components/SelectEyewearPage";
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      eyewearData: eyewearData,
      img: {},
      title: "",
      name: "",
      price: "",
      description: "",
      sizes: [],
      purchaseVal: "",
      redirect: false
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      purchaseVal: e.target.value
    });
  }

  handleSubmit(e) {
    e.preventDefault();

    const purchaseVal = {
      purchaseVal: this.state.purchaseVal
    };

    axios.post("/selecteyewear", 
      { purchaseVal }).then(function (response) {
      console.log(response);
    }).catch(function (error) {
      console.log(error.request);
      console.log(error.message);
    });
  };

  handleClick(data) {
    this.state.eyewearData.eyewear.filter( eyewear => {
      console.log(eyewear.id === data.target.getAttribute("data-id") && this.setState({
        img: eyewear.images,
        title: eyewear.brand,
        name: eyewear.name,
        price: eyewear.price,
        description: eyewear.description,
        sizes: eyewear.sizes
      }))
    })
  };

  render() {
    return (
      <BrowserRouter>
        <div>
          <Header />
                <Route exact path="/" render={() => <EyewearContent 
            eyewearData={this.state.eyewearData} 
            handleClick={this.handleClick} 
            img={this.state.img}
            title={this.state.title} 
            name={this.state.name}
            price={this.state.price}
            description={this.state.description}
            sizes={this.state.sizes}
            handlePurchaseEvent={this.handlePurchaseEvent} />} />
                <Route exact path="/buy" component={Buy} />
            </div>
        </BrowserRouter>
    );
  }
}

export default App;

这是我的表单所在的文件:

import React from "react";

const EyewearPurchaseBtn = (props) => (
    <div>
        <form className="eyewear-purchase-form" onSubmit={props.handleSubmit}>
            <h3>Select Size</h3>

                    {
                        props.sizes.map( size => (
                            <div key={size} >
                            <input onChange={props.handleChange} className="radio-btn" type="radio" name="purchaseVal" value={size} />
                            <label className="eyewear-purchase-label">{size}</label><br/>   
                            </div>
                        ))
                    }

                    <button className="buy-now">Buy Now</button>    
                </form>
    </div>
);

export default EyewearPurchaseBtn;

Answer 1

需要在import语句中给出axios的完整路径

从 'axios' 导入 axios;

附言如果仍然抛出错误，只需通过 npm/yarn 重新安装 axios