В чем проблема, при попытке удалить компонент?

Question

[Rasul]

Вот сам компонент, назовем его Component.jsx, покажу важную часть кода

<div>
      <form>
        <div>
          <button>
            <img src={buttonUp}/>
          </button>
          <button>
            <img src={buttonDown}>
          </button>
          <img
            src={removeComponent}
            onClick={props.removeThisComponent}
          />

А это скажем, App.js

const [components, setComponents] = useState([]);
{components.map((item, index, i) => (
            <Component key={index} removeThisComponent={removeComponent} />
          ))}

Каждый раз, когда я пытаюсь удалить текущий элемент компонента, у меня ничего не получается, я пробовал через фильтр, ничего не работает, но когда пытаюсь получить доступ к тому, что я пытаюсь удалить, у меня пишет что это img, к которому привязан onClick, а еще выходила такая ошибка:

Encountered two children with the same key, `null`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

У меня у самого нет понимания что я делаю, просто до этого я пользовался mockAPI, а там каждый компонент автоматически становиться уникальным при помощи создания id, который он сам создает, а здесь мне mockAPI не нужен, поэтому в недоумении.

Если я что-то плохо объяснил, спрашивайте, я объясню в деталях.

А вот и сама функция удаления

function removeComponent(item) {
    setComponents(components.filter((p) => p !== item));
}

Возможно, дело в том, что я не делаю компоненты уникальными, но я и не знаю как это сделать, я видел кучу гайдов, где люди давали id, но, после map они писали саму верстку, а у меня готовый компонент.

Answer 1

[Артем]

Что находится в стейте components? Изначально там пустой массив. Что ты туда заносишь?

Во-первых,
onclick должен вызывать функцию с передачей item, в твоём случае передается контекст img.

Во-вторых,
removeThisComponent={removeComponent}
это вообще зачем?
Зачем передавать в компонент функцию для удаления, если нужно передать item. И этот item дальше использовать в onclick.

Encountered two children with the same key, `null`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Это говорит о том, что используется не уникальные, в пределах итерации key

Comments

[Rasul]

В state components изначально действительно пусто. Я заношу туда целый компонент при помощи функции, которая привязана к кнопке

const addOneComponent = () => {
    setComponents([...components, <Component/>]);
  };

Получается, что img нужно обернуть в button, и

onClick={(comp) => {
              props.removeThisComponent(comp);
            }}}

removeThisComponent={() => removeComponent(comp)}

В console.log(comp) я уже начал получать объект, содержащий, все компоненты в state.

Другая проблема, мне нужно было получить в консоли текущий объект следующим образом

console.log(setComponents(components.filter((p)=> p !== comp )))

В консоли выводится ошибка undefined, мои предположения, что он не понимает что такое p

А если я напишу так

setComponents(components.filter((p)=> console.log(p) ))

В таком случае, он удаляет все элементы и консоль отображает эти самые элементы, показывает их столько раз, сколько было удалено, вроде бы всё понятно, он понимает что такое p, понимает что такое comp(изначально item), может быть я забыл добавить где-то лишний символ.

А, еще, в консоли я получаю $$typeof:: Symbol(React.elem), key:null
Может быть, проблема в этом самом key?

[Артем]

Максимально странная логика. Ну да ладно.

1. Мутировать Стейт нужно основываясь на предыдущем его значении или же сразу новое писать

const addOneComponent = (newComponent) => {
    setComponents(prev => (
    const newItem = {
         id: prev.length+1,
         Component: newComponent
         }

    return [...prev,  newItem]
)};

2.

{components.map((item => (
            <item.Component key={item.id} id={item.id} onRemove={removeComponent} />
          ))}

3.

function removeComponent(id) {
    setComponents(components.filter((p) => p.id !== id);
}

3. Кнопка удаления, я так понимаю находится в компоненте.

<img
            src={removeComponent}
            onClick={()=>props.onRemove(props.id)}
          />

Собери все в кучу. Т.к. всей логики я не вижу. И будет работать.
И читай мат.часть.

Я может где-то ошибся в скобках. Пишу с мобилы. Так что проверяй.

[Rasul]

Артем, Да, вы и в правду ошиблись в скобках, но я быстро все поправил и все работает, большое спасибо!