React props не передаются в дочерний компонент: причины и решения

Пишете компонент на React, передаёте props - а в дочернем компоненте они пустые или undefined? Это одна из самых частых проблем у новичков и даже у опытных разработчиков. В этой статье разберём все причины, почему props не доходят, и покажем, как это быстро исправить.

Что такое props в React

Props (сокращение от properties) - это способ передачи данных от родительского компонента к дочернему. Они работают как аргументы функции: родитель «отдаёт», дочерний «принимает».

// Родитель
<UserCard name="Алексей" age={30} />

// Дочерний компонент
function UserCard({ name, age }) {
  return <p>{name}, {age} лет</p>;
}

Props - однонаправленные: только сверху вниз. Если данные не пришли, проблема почти всегда в том, как они передаются или принимаются.

Почему props оказываются пустыми

1. Опечатка в имени prop

Самая частая ошибка - передаёте userName, а получаете username. JavaScript чувствителен к регистру.

// Родитель передаёт:
<Profile userName="Алексей" />

// Дочерний получает неправильно:
function Profile({ username }) { // undefined!
  return <p>{username}</p>;
}

// Правильно:
function Profile({ userName }) {
  return <p>{userName}</p>;
}

2. Забыли деструктурировать props

Если не деструктурировать - нужно обращаться через props.name, а не просто name.

// Ошибка:
function Card(name) { // name - это весь объект props!
  return <p>{name}</p>; // [object Object]
}

// Правильно (вариант 1 - деструктуризация):
function Card({ name }) {
  return <p>{name}</p>;
}

// Правильно (вариант 2 - через props):
function Card(props) {
  return <p>{props.name}</p>;
}

3. Данные ещё не загружены (асинхронность)

Если данные приходят из API, при первом рендере они могут быть undefined или null. Дочерний компонент рендерится раньше, чем данные пришли.

function Parent() {
  const [user, setUser] = useState(null); // изначально null

  useEffect(() => {
    fetchUser().then(data => setUser(data));
  }, []);

  // Без проверки - дочерний получит null
  return <Profile user={user} />;
}

// Решение - условный рендеринг:
return user ? <Profile user={user} /> : <Spinner />;

4. Неправильная структура объекта

Передаёте объект, а в дочернем ожидаете конкретное поле - но структура не та.

const data = { info: { name: "Алексей" } };

// Передаёте:
<Card data={data} />

// В дочернем ожидаете:
function Card({ data }) {
  return <p>{data.name}</p>; // undefined! Нужно data.info.name
}

5. Компонент обёрнут в HOC или memo без передачи props

Если компонент обёрнут в React.memo, HOC или forwardRef - props могут не пробрасываться.

// Ошибка в HOC:
function withLogger(Component) {
  return function() { // не принимает и не передаёт props!
    return <Component />;
  };
}

// Правильно:
function withLogger(Component) {
  return function(props) {
    return <Component {...props} />;
  };
}

6. Мутация state вместо создания нового объекта

Если вы мутируете объект вместо создания нового - React не видит изменений и не перерендеривает дочерние компоненты.

// Ошибка:
const handleChange = () => {
  user.name = "Новое имя"; // мутация!
  setUser(user); // React не видит изменений
};

// Правильно:
const handleChange = () => {
  setUser({ ...user, name: "Новое имя" }); // новый объект
};

7. Context вместо props - и забыли Provider

Если используете Context API, но не обернули дерево в Provider - значения будут дефолтными или undefined.

const UserContext = createContext(null);

// Забыли обернуть:
function App() {
  return <Profile />; // не получит контекст
}

// Правильно:
function App() {
  return (
    <UserContext.Provider value={{ name: "Алексей" }}>
      <Profile />
    </UserContext.Provider>
  );
}

Пошаговая диагностика: что делать, если props не приходят

Шаг 1. Добавьте console.log прямо в начало дочернего компонента:

function Child(props) {
  console.log("props:", props); // смотрим что пришло
  ...
}

Шаг 2. Установите React DevTools и проверьте props компонента в дереве.

Шаг 3. Проверьте имена - скопируйте название prop из родителя и вставьте в дочерний, чтобы исключить опечатку.

Шаг 4. Проверьте, не рендерится ли компонент раньше, чем данные загружены. Добавьте guard:

if (!data) return null;

Шаг 5. Убедитесь, что структура передаваемого объекта соответствует ожиданиям. Используйте console.log или JSON.stringify для проверки.

Шаг 6. Если используете HOC или memo - убедитесь, что props пробрасываются через {...props}.

Частые вопросы (FAQ)

Q: Почему props приходит как [object Object]? A: Вы передаёте объект в JSX без обращения к конкретному полю: {user} вместо {user.name}. Или не деструктурировали объект.

Q: Как передать функцию через props? A: Точно так же, как любое значение: <Button onClick={handleClick} />. В дочернем: function Button({ onClick }).

Q: Props пришли, но компонент не перерендерился после изменения данных в родителе. A: Скорее всего, вы мутируете state. Всегда создавайте новый объект: setState({ ...old, key: value }).

Q: Можно ли передать props через несколько уровней? A: Да, но это называется «prop drilling» и быстро становится неудобным. Для глубоких цепочек используйте Context API или state-менеджер (Redux, Zustand).

Q: Как передать все props сразу, не перечисляя каждый? A: Используйте spread: <Child {...parentProps} />. Но аккуратно - это может передать лишние данные.

Q: TypeScript говорит, что prop не существует на типе. Как исправить? A: Опишите тип компонента через интерфейс:

interface CardProps {
  name: string;
  age: number;
}
function Card({ name, age }: CardProps) { ... }

Q: Как передать дочерние элементы через props? A: Используйте специальный prop children:

<Card><p>Дочерний контент</p></Card>
// В компоненте: function Card({ children }) { return <div>{children}</div>; }

Q: Props читаются, но данные всегда старые. A: Убедитесь, что при изменении данных вы вызываете setState, а не меняете переменную напрямую. React отслеживает только изменения через state.

Лучшие практики при работе с props

• Всегда задавайте defaultProps или дефолтные значения при деструктуризации: function Card({ name = "Гость", age = 0 }) { ... }

• Используйте PropTypes или TypeScript для валидации - это ловит ошибки на этапе разработки, а не в проде.

• Не мутируйте props - они read-only. Если нужно изменить - создайте локальный state на основе prop.

• Избегайте глубокого prop drilling - если передаёте данные через 3+ уровня, рассмотрите Context.

• Именуйте props понятно - onSubmit вместо handler, isLoading вместо flag.

• Передавайте только нужные данные - не кидайте весь объект, если нужно одно поле.

Итог

Пустые props в React - почти всегда следствие одной из семи причин: опечатка в имени, неправильное получение, асинхронность, мутация state, ошибка в HOC, неверная структура данных или отсутствие Provider. Используйте console.log, React DevTools и TypeScript/PropTypes - это закроет 95% проблем ещё до деплоя.