无法对未安装的组件执行 React state 更新。 这是一个空操作，但它表明 memory 泄漏。 取消所有订阅

Question

I am passing props from a child nested inside a class component

class Viewer extends React.Component {
....
render(){
return(
.....
<DragAndDrop characters={characters}/>
)
}

to the parent functional component

function DragAndDrop(props) {
  console.log("char",props.characters); # I am able to console.log this
  const [characters, updateCharacters] = useState(props.characters); # but doing this throws an error 

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(characters);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    updateCharacters(items);
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Final Space Characters</h1>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul
                className="characters"
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {characters.map(({ id, name, thumb }, index) => {
                  return (
                    <Draggable key={id} draggableId={id} index={index}>
                      {(provided) => (
                        <li
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                        >
                          <div className="characters-thumb">
                            <img src={thumb} alt={`${name} Thumb`} />
                          </div>
                          <p>{name}</p>
                        </li>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </header>
    </div>
  );
}

export default DragAndDrop;

but when I pass props.characters to useState, it throw an error, How I can resolve this? thanks

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak. cancel all subscriptions an

Answer 1

This problem take place because you initialize state before mount component. If you want to correct your component you can use useEffect inside your component and inside that updateCharacters like below

useEffect(()=>{
updateCharacters(props.characters);
})