후크를 사용하여 어레이에서 객체 삭제(useState)

source

후크를 사용하여 어레이에서 객체 삭제(useState)

manycodes 2023. 4. 1. 09:38

후크를 사용하여 어레이에서 객체 삭제(useState)

나는 여러 가지 물건을 가지고 있다."this" 키워드를 사용하지 않고 어레이에서 개체를 삭제하는 함수를 추가해야 합니다.

는 는는그용사 i를 사용해 보았다.updateList(list.slice(list.indexOf(e.target.name, 1)))이렇게 하면 어레이의 마지막 항목을 제외한 모든 항목이 삭제되고 이유는 알 수 없습니다.

const defaultList = [
{ name: "ItemOne" },
{ name: "ItemTwo" },
{ name: "ItemThree" }]

const [list, updateList] = useState(defaultList);

const handleRemoveItem = e => {
    updateList(list.slice(list.indexOf(e.target.name, 1)))
}

return (
    {list.map(item => {
        return ( 
            <>
            <span onClick={handleRemoveItem}>x </span>
            <span>{item.name}</span>
            </>
        )}
    }
)

에서 삭제됩니다.이치노
배열의 배열의 마지막 항목을 제외한 전체 목록이 제거됩니다.

, ★★★★★★★★★★★★★★★★★.span에는 '클릭 이벤트'가 있어야 합니다.name않으면 수 .e.target그렇게 말하니까e.target.name는 폼 요소(입력, 선택 등)용으로 예약되어 있습니다.따라서 이름 속성을 실제로 사용하려면e.target.getAttribute("name")

되어 있기 에, 사물을 사용하는 이지 않습니다.list.indexOf(e.target.name)은 「이행자」를 있기 string개체를 반복할 때 사용합니다. 말은 '개 찾기를 '개 찾기'로 것과 [{}, {}, {}]

★★★★★★★★★★★★★★★★★.array.slice()전달한 인덱스의 항목부터 시작하는 새 배열을 반환합니다.따라서 마지막 항목을 클릭하면 마지막 항목만 반환됩니다.

걸 써보세요..filter(): codesandbox(코드박스)

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const defaultList = [
    { name: "ItemOne" },
    { name: "ItemTwo" },
    { name: "ItemThree" }
  ];

  const [list, updateList] = useState(defaultList);

  const handleRemoveItem = (e) => {
   const name = e.target.getAttribute("name")
    updateList(list.filter(item => item.name !== name));
  };

  return (
    <div>
      {list.map(item => {
        return (
          <>
            <span name={item.name} onClick={handleRemoveItem}>
              x
            </span>
            <span>{item.name}</span>
          </>
        );
      })}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Array.filter를 사용하면 다음과 같이 한 줄로 표시할 수 있습니다.

const handleRemoveItem = name => {
    updateList(list.filter(item => item.name !== name))
}

ETA: 또한 onClick 핸들러의 항목 이름을 전달해야 합니다.

{list.map(item => {
    return ( 
        <>
        <span onClick={() =>handleRemoveItem(item.name)}>x </span>
        <span>{item.name}</span>
        </>
    )}

const defaultList = [
    { name: "ItemOne" },
    { name: "ItemTwo" },
    { name: "ItemThree" }
]

const [list, updateList] = useState(defaultList);

const handleRemoveItem = idx => {
    // assigning the list to temp variable
    const temp = [...list];

    // removing the element using splice
    temp.splice(idx, 1);

    // updating the list
    updateList(temp);
}

return (
    {list.map((item, idx) => (
      <div key={idx}>
        <button onClick={() => handleRemoveItem(idx)}>x </button>
        <span>{item.name}</span>
      </div>
    ))}

)

지금까지의 최선의 답변에 대한 내 의견의 작은 개선

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const defaultList = [
    { name: "ItemOne" },
    { name: "ItemTwo" },
    { name: "ItemThree" }
  ];

  const [list, updateList] = useState(defaultList);

  const handleRemoveItem = (item) => {
    updateList(list.filter(item => item.name !== name));
  };

  return (
    <div>
      {list.map(item => {
        return (
          <>
            <span onClick={()=>{handleRemoveItem(item)}}>
              x
            </span>
            <span>{item.name}</span>
          </>
        );
      })}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

이름 속성을 지정하는 대신 핸들 함수로 보냅니다.

이 코드면 될 것 같아요.

let targetIndex = list.findIndex((each) => {each.name == e.target.name});
list.splice(targetIndex-1, 1);

개체 내부의 이름 값을 확인해야 하므로 대신 findIndex를 사용합니다.그런 다음 대상 색인에서 대상 색인 다음 배열로 개체 시작을 잘라냅니다.

코드펜

당신의 코멘트에서 당신의 문제는 다른 부분에서 비롯되었습니다.

이 보기 섹션 변경

    return ( 
        <>
        <span onClick={() => handleRemoveItem(item) }>x </span>
        <span>{item.name}</span>
        </>
    )}

함수 핸들 제거 형식 변경

const handleRemoveItem = item => {
    list.splice(list.indexOf(item)-1, 1)
    updateList(list);
}

용장 라이너 1개 - 테스트/유형/확장/반복/이유만큼 어려운 것은 권장하지 않습니다.

 <button onClick={() => setList(list.slice(item.id - 1))}

내보내기 없는 버전:

 const handleDeleteItem = id => {
     const remainingItems = list.slice(id - 1)
     setList(remainingItems);
}

다만, 다른 파일의 도우미 기능을 사용하는 것으로, 당신의 논리 구조를 확장하는 것을 검토해 보겠습니다.

그래서 필터와 슬라이스용으로 예를 하나 만들었습니다.저는 개인적으로 이 특별한 사용 사례의 슬라이스 옵션을 선호합니다. 이유는 쉽게 추론할 수 있기 때문입니다.확장이 큰 리스트에서도 약간 퍼포먼스가 뛰어난 것 같습니다(참고 자료 참조).

슬라이스를 사용하는 경우 기능적 스타일(부작용이 없는 순수 기능)에 따라 스플라이스가 아닌 슬라이스를 사용해야 합니다.

// use slice instead of splice (slice creates a shallow copy, i.e., 'mutates' )
export const excludeItemFromArray = (idx, array) => array.slice(idx-1)

// alternatively, you could use filter (also a shallow copy)
export const filterItemFromArray = (idx, array) => array.filter(item => item.idx !== idx)

예(필터 옵션과 슬라이스 옵션을 모두 가져오기로 함)

import {excludeItemFromArray, filterItemFromArray} from 'utils/arrayHelpers.js'

const exampleList = [
    { id: 1, name: "ItemOne" },
    { id: 2, name: "ItemTwo" },
    { id: 3, name: "ItemThree" }
]

const [list, setList] = useState(exampleList);

const handleDeleteItem = id => {
  
    //excluding the item (returning mutated list with excluded item)
    const remainingItems = excludeItemFromArray(id, list)

    //alternatively, filter item (returning mutated list with filtered out item)
    const remainingItems = filterItemFromArray(id, list)

    // updating the list state
    setList(remainingItems);
}

return (
    {list.map((item) => (
      <div key={item.id}>
        <button onClick={() => handleDeleteItem(item.id)}>x</button>
        <span>{item.name}</span>
      </div>
    ))}
)

참고 자료:

지도에서 인덱스 키 사용 안 함: https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/
슬라이스/필터 성능:https://medium.com/@justintulk/filter script-performance-array-vs-array-filter-4573d726aacb
슬라이스 매뉴얼:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
기능 프로그래밍 스타일: https://blog.logrocket.com/fundamentals-functional-programming-react/ # : ~ : text = Functional % 20 programming % 20 codes % 20 are 20 meant , computations % 20 are % 20 side % 20 effects .

이 패턴을 사용하면 어레이는 점프하지 않지만 이전 데이터를 가져와 새 데이터를 생성하여 반환합니다.

 const [list, updateList] = useState([
    { name: "ItemOne" },
    { name: "ItemTwo" },
    { name: "ItemThree" }
  ]);

     updateList((prev) => {
                return [
                    ...prev.filter((item, i) => item.name !== 'ItemTwo')
                ]
            })

이는 슬라이스와 스플라이스 모두 제거된 요소를 포함하는 배열을 반환하기 때문입니다.

를적용해야합니다.splice어레이에 접속하여 후크에서 제공하는 방법을 사용하여 상태를 갱신합니다.

const handleRemoveItem = e => {
    const newArr = [...list];
    newArr.splice(newArr.findIndex(item => item.name === e.target.name), 1)
    updateList(newArr)
}

언급URL : https://stackoverflow.com/questions/57341541/removing-object-from-array-using-hooks-usestate

'source' 카테고리의 다른 글

Oracle 스토어드 프로시저를 실행하는 방법 (0)	2023.04.01
스프링 부트 제어 대상 JAR 파일 이름 (0)	2023.04.01
JSON.parse('1234')가 1234를 반환하는 이유는 무엇입니까? (0)	2023.04.01
JavaScript를 사용하여 서버에서 텍스트 파일을 읽는 방법 (0)	2023.04.01
숍 페이지만을 대상으로 합니다. (0)	2023.04.01

현재글후크를 사용하여 어레이에서 객체 삭제(useState)

각종 프로그래밍 정보를 다루는 블로그입니다.

angular, Python, MongoDB, php, Wordpress, C, JSON, reactjs, Excel, Java, WPF, Git, spring-boot, ASP.NET, Oracle, MySQL, jQuery, mariadb, angularJS, JavaScript,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

manycodes

후크를 사용하여 어레이에서 객체 삭제(useState)

후크를 사용하여 어레이에서 객체 삭제(useState)

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

후크를 사용하여 어레이에서 객체 삭제(useState)

후크를 사용하여 어레이에서 객체 삭제(useState)

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바