Как удалить карточку из списка карточек (используя API для извлечения информации о пользователе Github на карточку, представленную в списке)? - PullRequest
Новая
       156

Как удалить карточку из списка карточек (используя API для извлечения информации о пользователе Github на карточку, представленную в списке)?

0 голосов
/ 21 июня 2020

Это проект реакции, который использует API для создания карточки, которая представляет информацию о пользователях Github. В настоящий момент я использую кнопку удаления на каждой карте, которая удаляет эту карту c. Вы можете попробовать приложение в изолированной программной среде кода, щелкнув здесь. . Инструкции по использованию: введите любое имя пользователя «Github» во входные данные и нажмите «Добавить карту».

После того, как вы нажмете «Добавить карту», ​​информация о пользователе будет извлечена в карту, которая затем сохраняется в списке карт. У этого есть идентифицируемый ключом. Но при нажатии на «Удалить» вместо удаления соответствующей карты, на которой была нажата кнопка «Удалить», в настоящее время удаляются все карты. (Я исключил компонент формы, чтобы его было легче читать).

Не уверен, что я неправильно использую splice или неправильно объявляю ключ карты? 

function App() {
  const [cards, setCards] = useState([]);

  const addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo));
  };

  const removeCard = key => {
    setCards(cards.splice(key, 0))
  }

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList
        cards={cards}
        handleClick={removeCard}
      />
    </div>
  );
}

const CardList = props => (
  <div>
    {props.cards.map((card, index) => (
      <Card {...card} key={index} handleClick={props.handleClick} />
    ))}
  </div>
);

const Card = props => {
  return (
    <div style={{ margin: "1em" }}>
      <img alt="avatar" style={{ width: "70px" }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: "bold" }}>{props.name}</div>
        <div>{props.blog}</div>
        <a href={props.html_url}>{props.html_url}</a>
        <button onClick={props.handleClick}>Delete</button>
      </div>
    </div>
  );
};

Ответы [ 2 ]

0 голосов
/ 11 июля 2020

Моя ошибка заключалась в использовании splice вместо среза. Поскольку splice мутирует исходный массив, этого следует избегать. Но, нарезав массив до индекса, который вы хотите удалить, вы можете затем вырезать с другой стороны индекса, который вы хотите удалить, и соединить второй фрагмент с первым. 

 const removeCard = key => {
    setCards(cards.slice(0, key).concat(cards.slice(key + 1, cards.length)))
  };

Вы можете найти полную реализацию кода ниже: 

function App() {
  const [cards, setCards] = useState([]);

  const addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo));
  };

  const removeCard = key => {
     setCards(cards.slice(0, key).concat(cards.slice(key + 1, cards.length)))
  };

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList
        cards={cards}
        handleClick={removeCard}
      />
    </div>
  );
}

const CardList = props => (
  <div>
    {props.cards.map((card, index) => (
      <Card {...card} key={index} handleClick={props.handleClick(index)} />
    ))}
  </div>
);

const Card = props => {
  return (
    <div style={{ margin: "1em" }}>
      <img alt="avatar" style={{ width: "70px" }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: "bold" }}>{props.name}</div>
        <div>{props.blog}</div>
        <a href={props.html_url}>{props.html_url}</a>
        <button onClick={props.handleClick}>Delete</button>
      </div>
    </div>
  );
};
0 голосов
/ 21 июня 2020

Точнее, вы неправильно используете splice в контексте хуков. Отметьте здесь , чтобы узнать, как работает монтаж.

Метод splice () добавляет / удаляет элементы в / из массива и возвращает удаленные элементы.

Итак, вы устанавливаете элемент, который пытаетесь удалить, в свою переменную. Чтобы сохранить исходный лог c, я предлагаю вам использовать временную переменную, например: 

const removeCard = key => {
   let tempCards = cards;
   const removedCard = tempCards.splice(key, 0); // you can use the removed card if needed
   setCards(tempCards);
}

И ключ параметра не определен, вы должны передать этот параметр своей функции, см. Документацию :

Для незначительного изменения вашего кода вы можете изменить это: 

 <Card {...card} key={index} handleClick={props.handleClick} />

на это: 

  <Card {...card} key={index} handleClick={() => props.handleClick(index)} />

EDIT: при использовании concat возможно, это добавление каждого элемента вашей новой карты. Попробуйте изменить это: 

 setCards(cards.concat(cardInfo));

на это: 

setCards(cards.push(cardInfo));
...