Reactjs 将dom从子组件更新到父组件

我在子组件中调用axios delete方法，并希望刷新父组件以作出反应。调用delete时，它从数据库中删除了行，但需要手动重新加载。如果不手动重新加载，我怎么能做到这一点

我想删除方法works，同时更新ProductList.js

从React导入React，{Component}； 从axios导入axios； 从./Table导入表； 类ProductList扩展组件{ 构造器{ 超级作物； this.state={productData:[]}； } 组件安装{ axios .gethttp://localhost:8080/products .thenresponse=>{ console.logresponseProductList==，响应； this.setState{productData:response.data}； } .catchfunction错误{ console.logerror； }; } 塔布罗{ 返回此.state.productData.mapfunction对象，i{ 回来 }; } 渲染{ 回来 产品清单 身份证件 名称 价格 行动 {this.tabRow} ; } }

---

导出默认产品列表 成功删除产品后，需要更新父状态

可以这样做的方法是在父组件中定义更新逻辑，然后在删除成功时从子组件调用该函数

// Define your update product logic here 
// It will get productId (or any other unique key) as parameter
// and will use that unique key to update the producsts 
// I've added an example logic but yours can be different
updateProducts = (productId) => {
    let productsClone = { ...this.state.productData };
    const productIndex = productsClone.findIndex(item => item.id == productId);

    if (productIndex > -1) {
        productsClone.splice(productIndex, 1);
        this.setState({ productData: productsClone });
    }
}

---

首先，你不应该使用索引作为键，而应该使用产品的id，因为如果你使用索引，你可能会在删除后遇到奇怪的错误。 要更新列表，我将传递一个回调onDeleteid并在父级中处理它。 像这样：

从React导入React，{Component}； 从axios导入axios； 从./Table导入表； 类ProductList扩展组件{ 构造器{ 超级作物； this.state={productData:[]}； } 组件安装{ axios .gethttp://localhost:8080/products .thenresponse=>{ console.logresponseProductList==，响应； this.setState{productData:response.data}； } .catchfunction错误{ console.logerror； }; } //******这是您将要传递的回调******** onProductDeleted=id=>{ this.setStatestate=>{productData:state.productData.filterx=>x.id！==id} } 塔布罗{ 返回this.state.productData.mapobject=>{ //*********传递回调************ 回来 }; } 渲染{ 回来 产品清单 身份证件 名称 价格 行动 {this.tabRow} ; } }

---

导出默认产品列表 最后的答案是：它经过了轻微的编辑，现在可以正常工作了

从React导入React，{Component}； 从axios导入axios； 从./Table导入表； 类ProductList扩展组件{ 构造器{ 超级作物； this.state={productData:[]}； } 组件安装{ axios .gethttp://localhost:8080/products .thenresponse=>{ console.logresponseProductList==，响应； this.setState{productData:response.data}； } .catchfunction错误{ console.logerror； }; } //******这是您将要传递的回调******** onProductDeleted=id=>{ this.setStatestate=>{productData:state.productData.filterx=>x.id！==id} } 塔布罗==>{ 返回this.state.productData.mapobject=>{ //*********传递回调************ 回来 }; } 渲染{ 回来 产品清单 身份证件 名称 价格 行动 {this.tabRow} ; } }

---

导出默认产品列表；您正在此处更改状态-这是一个很大的“否”。您调用了W new state Products克隆，但没有克隆任何内容。TypeError:无法读取undefined的属性“updateProducts”-此错误是在执行此操作后发生的that@SKChanchol将tabRow更改为箭头函数，tabRow==>{…}@Muneeb brother，我照你说的做。将tabRow更改为箭头函数。但同样的错误也出现了。TypeError:无法读取未定义的属性“updateProducts”。我收到此错误。TypeError:现在无法读取undefinedTry的属性“onProductDeleted”。您将常规函数而不是箭头函数传递给mapin tabRow。我改成了arrow函数，现在可以使用了吗？我很高兴听到：我建议您阅读这篇文章，了解常规函数和arrow函数之间的区别Poiler alert：这不仅仅是语法问题，因为如果您不理解它，可能会导致很多挫折。我是一个新手。谢谢你的推荐。我会的 阅读并练习这些东西。

tabRow() {
    return this.state.productData.map(function (object, i) {
    // pass your `this.updateProducts` as a props to your child component
        return <Table obj={object} key={i} updateProducts={this.updateProducts} />;
    });
}

deleteProduct = () => {
    axios
        .delete("http://localhost:8080/products/" + this.props.obj.id)
        .then((res) => {
            if (res.status === 200) {
                // Finally, here, call the updateProucts when API return success and make sure to pass the correct key as a parameter    
                this.props.updateProducts(res.data.id);
            } else {
                console.log("Not refresh");
            }
        })
        .catch((err) => console.log(err));
};