Блог

я прошу прощения за самый простой вопрос, так как я новичок в реагировании на js. я создал массив в компоненте react и визуализирую его с помощью функции map в одном компоненте, и я хочу изменить (добавить/тему) в массиве из другого компонента на основе _id. ниже приведен пример, который поможет вам лучше понять, чего я на самом деле хочу. Заранее благодарю, сэр

     {*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;
 

CODESANDBOX

Все, что вам нужно сделать, это объявить handleDelete и handleUpdate в Parent компоненте и передать его как props SecondChild компонент in. Если мы поместим состояние и его методы в Parent компонент, то его будет легко отслеживать, отлаживать и поддерживать. Было бы легко передать методы, если бы мы определили другой компонент, скажем ThirdComponent , и он также содержит функциональность для выполнения операции CRUD с ArrayData массивом.

В FirstChild компоненте вы разрушали данные const { ArrayData} = this.state; массива и использовали их в методе визуализации. Он не будет обновляться, мы получаем новое props , потому что вы отображаете состояние массива, которое создается один раз(так как конструктор будет вызван один раз), и нам нужно последнее значение ArrayData из родительского компонента. Мы можем использовать реквизит непосредственно в render методе. Вам нужно просмотреть методы жизненного цикла react.

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;