Question

我正在使用React，ASP.NET和EF构建测试CRUD应用程序。

现在我在发送<key>NSAppTransportSecurity</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> <key>bloodconnector.org</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict>时遇到问题，该productID由服务器的asp.net控制器删除。

我想从projectID发送handleDeleteProduct。现在，控制器中的productID自变量没有值。我猜测ProductBox

中有问题

ProductList.js：

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import Product from '../components/Product';

class ProductList extends React.Component {
    deleteProduct(productID) {
        this.props.onDelete(productID);
    }
    render() {
        let productNodes;
        if (this.props.data) {
            productNodes = (this.props.data || []).map(product => {
            return (
                <Product onDelete={this.deleteProduct.bind(this)} name={product.name} key={product.productID}>
                    {product.description} <span>, </span>
                    {product.price}
                </Product>
            );
        });
    }
        return (
            <div className="productList">
                {productNodes}
            </div>
        );
    }
}
export default ProductList;

我的ProductBox.js如下：

import React, { Component } from 'react';
import $ from 'jquery';
import uuid from 'uuid';
import ProductList from '../components/ProductList';
import ProductForm from '../components/ProductForm';

class ProductBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.initialData };
        this.handleProductSubmit = this.handleProductSubmit.bind(this);
        this.handleDeleteProduct = this.handleDeleteProduct.bind(this);
    }
    loadProductsFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    handleProductSubmit(product) {
        const products = this.state.data;
        product.productID = products.length + 1;
        const newProducts = products.concat([product]);
        this.setState({ data: newProducts });

        const data = new FormData();
        data.append('Name', product.Name);
        data.append('Description', product.Description);

        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.submitUrl, true);
        xhr.onload = () => this.loadProductsFromServer();
        xhr.send(data);
    }
    handleDeleteProduct(projectID) {
        const data = projectID;
        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.deleteUrl, true);
        xhr.onload = () => this.loadProductsFromServer();
        xhr.send(data);
    }
    componentDidMount() {
        window.setInterval(() => this.loadProductsFromServer(), this.props.pollInterval);
    }
    render() {
        return (
            <div className="productBox">
                <h1>Tutaj React z EF</h1>
                <ProductForm onProductSubmit={this.handleProductSubmit} />
                <ProductList onDelete={this.handleDeleteProduct.bind(this)} data={this.state.data} />
            </div>
        );
    }
}

export default ProductBox;

app.js中的代码段：

<ProductBox url="/comments" submitUrl="/comments/new" deleteUrl="/comments/delete" pollInterval={2000}/>

HomeController.cs

[Route("comments/delete")]
        [HttpPost]
        public ActionResult DeleteComment(int productID)
        {
            var products = _context.Products;
            foreach(var item in products)
            {
                if(item.ProductID == productID)
                {
                    products.Remove(item);
                    _context.SaveChanges();
                }
            }

            return Content("Success :)");
        }

Answer 1

第一个问题是您没有将productId传递给父控制器。这是您需要执行的操作。

<Product onDelete={(e)=>this.deleteProduct(product.productID)}

第二，确保在父方法handleDeleteProduct中获得了该productId 第三，检查xhr请求是否正确。这是一个例子

handleDeleteProduct(projectID) {

    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.props.deleteUrl, true);

    //Send the proper header information along with the request
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function () {//Call a function when the state changes.
        if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
            // Request finished. Do processing here.
        }
    }
    xhr.send("productID=" + projectID);
}

Answer 2

好吧，在试图弄清楚我的臀部几小时后，我找到了解决方案。我在jQuery中使用了Ajax：

handleDeleteProject(projectID) {
        $.ajax({
            url: './comments/delete',
            data: { productID: projectID },
            type: 'get',
            cache: true,
            success: function (response) {
                console.log("ok");
            },
        });
    }

我开始认为XMLHttpRequest有点废话。谢谢@Justcode花费的时间和精力。

如何将ID从React组件传递到ASP.NET控制器？

2 个答案: