将对象更改为数组，然后在反应中出现另一个组件 [英] change object into array present another component in react
问题描述
很抱歉我刚开始对js进行响应，这是一个非常基本的问题.我已经在react组件中创建了一个数组，并通过map函数在一个组件中进行渲染，并且我想根据_id从另一个组件更改(添加/主题)该数组.以下是一个示例，可以帮助您更好地了解我的实际需求.预先感谢先生
i am sorry for the very basic question as i m new to react js. i have created an array in a react component and render it through map function in one component and i want to change (add/Subject) in the array from an other component on basis of _id. the following is a sample that helps you better to understand what i actually want. Thanks in advance Sir
{*Array Component*}
const ArrayData =[
{
_id:1,
title:"All Searches"
},
{
_id:5,
title:1
},
{
_id:6,
title:"4"
}
]
export default ArrayData;
{*2nd Component*}
import react from "react"
import ArrayData from ArrayComponent
class Parent extends React.Component {
constructor() {
super();
this.state = {
ArrayData:ArrayData,
collapsed: false,
}
}
render() {
const { ArrayData } = this.state;
return (
<>
<FirstChild Data={ArrayData} />
<SecondChild />
</>
);
}
}
export default Parent;
!------------------------------------------!
{*FirstChild*}
class FirstChild extends React.Component {
constructor(props){
super();
this.state={
ArrayData:props.ArrayData
}
}
render() {
const { ArrayData} = this.state;
const renderArray = ArrayData.slice(0, 5).map(Object => {
return <h1>{object._id} </h1>
})
return (
<>
{renderArray}
</>
);
}
}
export default FirstChild;
!-----------------------------------------!
{*SecondChild*}
import { React } from "react";
const SecondChild = () => {
const handleUpdate=(_id, Title) =>{
{*function that can add the inputs as a object into that arrayComponent*}
}
const handleDelete=(_id) =>{
{*function that can delete a object from that arrayComponent having the id given by User in the feild*}
}
return (
<>
<input type='text' name='_id' placeHolder="Which object you want to delete" />
<button type=Submit onClick={handleDelete} >Delete</button>
<br></br>
<input type='text' name='_id' />
<input type='text' name='title' />
<button type=Submit onClick={handleUpdate} >Update</button>
</>
);
}
export default SecondChild;
推荐答案
所有您需要做的就是在 Parent 组件上声明 handleDelete 和 handleUpdate 并将其作为 props 在 SecondChild 组件中.如果将 state 及其方法放置在 Parent 组件中，则很容易跟踪，调试和维护.如果我们定义另一个组件，例如 ThirdComponent ，它很容易传递方法，并且它还包含对 ArrayData 数组执行CRUD操作的功能.
All you need to do is declare handleDelete and handleUpdate on the Parent component and pass it as a props in SecondChild component. If we place state and its methods in Parent component, then it is easy to track, debug, and easy to maintain. It would be easy to pass the methods if we define another component, let say ThirdComponent and it also contains functionality to perform CRUD operation on the ArrayData array.
在 FirstChild 组件中，您正在分解ArrayData const {ArrayData} = this.state; 并将其用于render方法.它不会更新，因为您正在渲染一次创建的数组状态(因为构造函数将被调用一次)，并且我们需要最新的 ArrayData props >来自父组件.我们可以直接在 render 方法中使用道具.您需要查看react 生命周期方法.
In the FirstChild component, you were destructuring the ArrayData const { ArrayData} = this.state; and using it in the render method. It won't update we receive new props because you are rendering the array state that gets created once(as a constructor will get called once) and we want the latest value of ArrayData from the parent component. We can use props directly in the render method. You need to see the react lifecycle methods.
Parent.js
import React from "react";
import ArrayData from "./ArrayComponent";
import FirstChild from "./FirstChild";
import SecondChild from "./SecondChild";
class Parent extends React.Component {
constructor() {
super();
this.state = {
ArrayData: ArrayData,
collapsed: false
};
this.handleDelete = this.handleDelete.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
}
handleDelete(id) {
const idToDelete = parseInt(id, 10);
this.setState((state) => {
const filteredArrayData = state.ArrayData.filter(
(el) => el._id !== idToDelete
);
return {
ArrayData: filteredArrayData
};
});
}
handleUpdate(newObj) {
console.log(newObj);
this.setState((state) => ({
ArrayData: [...state.ArrayData, newObj]
}));
}
render() {
return (
<>
<FirstChild Data={this.state.ArrayData} />
<SecondChild
handleUpdate={this.handleUpdate}
handleDelete={this.handleDelete}
/>
</>
);
}
}
export default Parent;
FirstChild.js
import React from "react";
class FirstChild extends React.Component {
render() {
return (
<>
{this.props.Data.slice(0, 5).map((el) => {
return <h1 key={el._id}>{el._id}</h1>;
})}
</>
);
}
}
export default FirstChild;
SecondChild.js
import React, { useState } from "react";
const SecondChild = ({ handleUpdate, handleDelete }) => {
const [idToDelete, setIdToDelete] = useState(null);
const [newID, setNewID] = useState(null);
const [newTitle, setNewTitle] = useState("");
return (
<>
<input
name="_id"
type="number"
onChange={(e) => setIdToDelete(e.target.value)}
placeholder="Which object you want to delete"
/>
<button type="submit" onClick={() => handleDelete(idToDelete)}>
Delete
</button>
<br></br>
<br></br>
<br></br>
<input
type="text"
name="_id"
placeholder="id"
onChange={(e) => setNewID(e.target.value)}
/>
<input
type="text"
name="title"
placeholder="title"
onChange={(e) => setNewTitle(e.target.value)}
/>
<button
type="submit"
onClick={() => handleUpdate({ _id: newID, title: newTitle })}
>
Update
</button>
</>
);
};
export default SecondChild;
这篇关于将对象更改为数组，然后在反应中出现另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
