Блог

Я не могу разобраться в этом поведении. В сообщении журнала консоли компонента приложения arr отображается как массив с 2 элементами, как и ожидалось. Однако, когда он передается дочернему компоненту, он отображается как пустой массив. Если вместо того, чтобы использовать splice непосредственно для массива pokemon, я сначала распространяю его на новый массив, а затем использую splice для этого, он работает нормально.

Очевидно, это потому, что splice изменяет массив напрямую, что противоречит правилу неизменности React, но я не могу понять, почему это имеет значение, когда массив pokemon не является тем, что передается дочернему компоненту.

 const pokemon = [
  {
    name: 'pikachu'
  },
  {
    name: 'raichu'
  }
]

export default function App() {
  const arr = pokemon.splice(0,2)
  console.log(arr)
  return (
    <div className="App">
      <ChildComponent example={arr} />
    </div>
  );
}

const ChildComponent = (props) => {
  console.log(props);
  return (
    <div>
      hi
    </div>
  )
}
 

На самом деле причина, по которой вы сталкиваетесь с этим странным поведением, заключается в том, что ваш код App обернут StrictMode, который дважды отображает ваш компонент.

Сначала Splice возвращает удаленные элементы, затем у pokemon не осталось ни одного после первого сращивания. arr печатает эти удаляемые элементы. Поскольку ваше приложение обернуто StrictMode (приложение выполняется снова), pokemon (который теперь является пустым массивом) снова объединяется, а дочерний элемент имеет пустой массив, печатающий пустой массив.

Если вы удалите StrictMode перенос, ваш код будет вести себя так, как ожидалось, и оба console.log будут печататься правильно.