Javascript 当我修改一个依赖于父状态的变量时,我不希望它修改初始状态
我试图设置一个过滤器,所以,我要做的是首先创建一个名为FilteredDataParentState的新变量,它是我的主体类的总状态,在我有要过滤的数据(对象数组)的内部,我使用.filter函数生成过滤数组,我在previos变量FilteredataParentState上设置了此过滤数据。我将total FilteredataParentState传递给显示数据的组件 当我写输入时,过滤器工作正常,问题是我不知道为什么parentState也会修改,所以当我删除输入时,数据不会返回到原始状态Javascript 当我修改一个依赖于父状态的变量时,我不希望它修改初始状态,javascript,reactjs,filter,state,Javascript,Reactjs,Filter,State,我试图设置一个过滤器,所以,我要做的是首先创建一个名为FilteredDataParentState的新变量,它是我的主体类的总状态,在我有要过滤的数据(对象数组)的内部,我使用.filter函数生成过滤数组,我在previos变量FilteredataParentState上设置了此过滤数据。我将total FilteredataParentState传递给显示数据的组件 当我写输入时,过滤器工作正常,问题是我不知道为什么parentState也会修改,所以当我删除输入时,数据不会返回到原始状
render() {
let filteredDataParentSate = this.props.parentState
let filterdData = filteredDataParentSate.data.filter(
(dat) =>{
return dat.nombre_completo.toLowerCase().indexOf(filteredDataParentSate.search.toLowerCase()) !== -1;
}
)
console.log(this.props.parentState.data)
filteredDataParentSate.data = filterdData
console.log(this.props.parentState.data)//this have to return the same that the previous console.log, but this return the filtered data
在这里,我将数据发送到显示它的组件
<TableNotTableRender
parentState={filteredDataParentSate}
methods={{
handleshow: this.handleshow,
addRecaudo: this.addRecaudo,
deletetransaction: this.deletetransaction,
cancelTransaction: this.props.methods.cancelTransaction,
prealistadoButton: this.props.methods.prealistadoButton,
showProducts: this.props.methods.showProducts,
isDelivered: this.props.methods.isDelivered,
sort: this.props.methods.sort,
updateSearch: this.props.methods.updateSearch
}}
>
“我的状态”中的数据用get调用填充,这是要筛选的数据,通常如下所示:
"data": [
{
"id_usuario": "18",
"nombre_completo": "Nuevo cliente",
"tipo_identificacion": "CC",
"identificacion": "103855555",
"celular": "20202020",
"fk_ciudad": "1",
"fk_departamento": "52",
"correo": "nuevo.cliente@nuevo.com",
"direccion": "calle 82a # 70-78",
"estrato": "3",
"canal_adquisicion": "Referida",
"fecha_nacimiento": "1994-12-10",
"fk_id_usuario": "15",
"fk_id_campana": null,
"edad": 32,
"createdAt": "2020-08-26T02:33:46.223Z",
"updatedAt": "2020-08-26T21:47:43.196Z",
},
{
"id_usuario": "15",
"nombre_completo": "Otro Cliente",
"tipo_identificacion": "CC",
"identificacion": "1038444444",
"celular": "3190000000",
"fk_ciudad": "1",
"fk_departamento": "1",
"correo": "otro@otro.com",
"direccion": "calle 82a",
"estrato": "3",
"canal_adquisicion": "Referida",
"fecha_nacimiento": "1996-01-16",
"fk_id_usuario": "13",
"fk_id_campana": null,
"edad": 24,
"createdAt": "2020-08-22T02:31:52.254Z",
"updatedAt": "2020-08-28T20:52:03.010Z",
},
]
这是我更新搜索输入的方法
updateSearch = (event) => {
this.setState({ search: event.target.value })
}
如何从父组件设置状态?数组和对象等非基本数据类型通过引用传递。所以这两个引用可能都指向内存中的同一个对象。请共享更多代码以便确认。谢谢,我已经添加了更多代码。您如何从父组件设置状态?数组和对象等非基本数据类型通过引用传递。所以这两个引用可能都指向内存中的同一个对象。请分享更多代码以便确认。谢谢,我已经添加了更多代码。
updateSearch = (event) => {
this.setState({ search: event.target.value })
}