В моем компоненте есть функция рендеринга:
render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
});
return (
<div>
...
<ul>
{items}
</ul>
...
</div>
);
}
все рендерится нормально, однако при нажатии на элемент <li>
я получаю следующую ошибку:
Uncaught Error: Invariant Violation: Objects are not valid as a React child (найдено: объект с ключами {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Если вы хотите отобразить коллекцию дочерних элементов, используйте массив или оберните объект с помощью createFragment(object) из функции дополнения React. Проверьте метод рендеринга
Welcome
.
Если я изменю this.onItemClick.bind(this, item)
на (e) => onItemClick(e, item)
внутри функции map, все работает как ожидалось.
Если кто-то может объяснить, что я делаю неправильно, и объяснить, почему я получаю эту ошибку, было бы здорово.
UPDATE 1: Функция onItemClick выглядит следующим образом и удаление this.setState приводит к исчезновению ошибки.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Но я не могу удалить эту строку, так как мне нужно обновить состояние этого компонента
У меня была такая ошибка, и оказалось, что я непреднамеренно включил в код JSX объект, который должен был быть строковым значением:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
раньше был строкой, но в результате рефакторинга стал объектом. К сожалению, сообщение об ошибке React' не очень хорошо помогло указать мне на строку, в которой возникла проблема. Мне пришлось проследить стек-трассировку до конца, пока я не распознал "props", передаваемый в компонент, а затем я нашел код ошибки.
Вам нужно либо сослаться на свойство объекта, которое является строковым значением, либо преобразовать объект в желаемое строковое представление. Одним из вариантов может быть JSON.stringify
, если вы действительно хотите увидеть содержимое объекта.
Я получил эту ошибку при попытке отобразить свойство createdAt
, которое является объектом Date. Если вы соедините .toString()
в конце следующим образом, это выполнит преобразование и устранит ошибку. Просто размещаю это как возможный ответ на случай, если кто-то еще столкнется с такой же проблемой:
{this.props.task.createdAt.toString()}
Я только что получил ту же ошибку, но из-за ошибку: я использовал двойные скобки, как:
{{count}}
чтобы вставить значение count
вместо правильного:
{count}
какой компилятор, вероятно, превратился в {{граф: графа}}
, т. е. пытаясь вставить объект, как ребенок реагирует.
Просто думал, я хотел бы добавить к этому, как у меня сегодня такая же проблема, оказалось, что это было, потому что я возвращался просто функция, когда я завернула его в `<див> тег он начал работать, как показано ниже
renderGallery() {
const gallerySection = galleries.map((gallery, i) => {
return (
<div>
...
</div>
);
});
return (
{gallerySection}
);
}
Вышеуказанное вызвало ошибку. Я исправил проблему путем изменения `вернуться раздел () на:
return (
<div>
{gallerySection}
</div>
);
...или просто:
return gallerySection
Шахту приходилось делать с излишне поставив фигурные скобки вокруг переменной, содержащей HTML-элемент внутри оператора return в функции render (). Это заставило среагировать рассматривать ее как объект, а не элемент.
render() {
let element = (
<div className="some-class">
<span>Some text</span>
</div>
);
return (
{element}
)
}
Как только я убрал фигурные скобки из элемента, ошибка пропала, и элемент был правильно отображен.
Моей пришлось делать с забыл фигурные скобки вокруг реквизит отправляется презентационная компонента:
Перед:
const TypeAheadInput = (name, options, onChange, value, error) => {
После
const TypeAheadInput = ({name, options, onChange, value, error}) => {
Реагировать ребенок(в единственном числе) должны быть типа примитивный тип данных не объект или это может быть тег JSX(который не в нашем случае). Использовать пакет Proptypes в развитие, чтобы убедиться, что проверка происходит.
Просто быстрый код(JSX) сравнение, чтобы представить вам идею :
<див> {/ элемент объекта с пользователя's имя и другие сведения о его /} {пункты.карту((пункт, индекс) => { возвращение <див ключ={индекс}> --объект передается ошибкам--->>>{пункт}</дел>; })} </див> 2. Без ошибок : с объекта'ы имущества(который должен быть примитивным, т. е. строковое значение или целое число) передается на ребенка.
<див> {/ элемент объекта с пользователя's имя и другие сведения о его /} {пункты.карту((пункт, индекс) => { возвращение <див ключ={индекс}> --обратите внимание на свойство name-это первобытно--->{пункт.имя}</див>; })} </див>
Мы выбрали (из указанных ниже источников) : убедитесь, что все элементы, которые вы'повторного перевода в JSX являются примитивами, а не объектов при использовании реагируют. Эта ошибка обычно происходит потому, что функция участвует в диспетчеризации события был дан неожиданный тип объекта (я.электронная передача объекта, когда вы должны передать строку) или часть JSX в вашем компонентов не ссылаются на примитивное (т. е. это.реквизиты против этого.реквизит.имя).
Источник - codingbismuth.com
Ни для кого с помощью Firebase с Android, это только ломает Андроид. Мой эмуляции iOS и игнорирует его.
И как написал выше Apoorv банке.
Все, что выше опорного пункта У5.0.3, для Android, атм-это перебор. Исправление:
npm i --save [email protected]
Подтверждено много раз здесь https://github.com/firebase/firebase-js-sdk/issues/871
Я тоже получал эту "объекты не являются допустимыми как реагирует ребенок на" ошибки и для меня причина была из-за вызова асинхронной функции, в JSX. См. ниже.
class App extends React.Component {
showHello = async () => {
const response = await someAPI.get("/api/endpoint");
// Even with response ignored in JSX below, this JSX is not immediately returned,
// causing "Objects are not valid as a React child" error.
return (<div>Hello!</div>);
}
render() {
return (
<div>
{this.showHello()}
</div>
);
}
}
Что я узнал, что асинхронное отображение не поддерживается в реакцию. Команда отреагировала на решение как описано здесь.
У меня тоже такая же проблема, но моя ошибка-это так глупо. Я пытаюсь получить доступ к объекту напрямую.
class App extends Component {
state = {
name:'xyz',
age:10
}
render() {
return (
<div className="App">
// this is what I am using which gives the error
<p>I am inside the {state}.</p>
//Correct Way is
<p>I am inside the {this.state.name}.</p>
</div>
);
}
}
Если по каким-то причинам вы импортировали военнослужащих. Затем попробуйте запустить НПМ я-сохранить [email protected]
. Это потому, что военнослужащих сломать реагировать родной, так что работает это исправить.
В моем случае это был я забыл возвращает HTML-элемент ФРМ функции render и я возвращался объекта . Что я сделал, я просто завернул {пункты} с HTML-элементом - простой элемент div, как показано ниже
в
<ul>{items}</ul>
в
Ты просто использовал ключи от объекта, а не весь объект!
Более подробную информацию можно найти здесь: https://github.com/gildata/RAIO/issues/48
в
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class SCT extends Component {
constructor(props, context) {
super(props, context);
this.state = {
data: this.props.data,
new_data: {}
};
}
componentDidMount() {
let new_data = this.state.data;
console.log(`new_data`, new_data);
this.setState(
{
new_data: Object.assign({}, new_data)
}
)
}
render() {
return (
<div>
this.state.data = {JSON.stringify(this.state.data)}
<hr/>
<div style={{color: 'red'}}>
{this.state.new_data.name}<br />
{this.state.new_data.description}<br />
{this.state.new_data.dependtables}<br />
</div>
</div>
);
}
}
SCT.propTypes = {
test: PropTypes.string,
data: PropTypes.object.isRequired
};
export {SCT};
export default SCT;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
в
У меня тот же вопрос, в моем случае, Обновить возвращение состоянии, и новые параметры сведения не соответствуют старых параметров, поэтому, когда я хочу получить доступ к некоторым параметрам он через эту ошибку,
Может быть, этот опыт поможет кому-то
Мой вопрос был простой, когда я столкнулся следующее сообщение об ошибке:
objects are not valid as a react child (found object with keys {...}
только что я проходил мимо объекта с ключами, указанный в ошибке при попытке отображения объекта напрямую в компонент с помощью {объект} ожидаю, что это будут строки
object: {
key1: "key1",
key2: "key2"
}
при оказании компонента реагируют, я использовал что-то вроде ниже
render() {
return this.props.object;
}
но это должно было быть
render() {
return this.props.object.key1;
}
Я'd, как добавить еще один вариант решения этого списка.
Характеристики:
Я столкнулся с той же ошибкой:
неперехваченной ошибки: объекты не действует, как ребенок реагирует (найдено: объект с ключами {ХХХХ}). Если вы имели в виду, чтобы представить коллекцию детей, вместо того, чтобы использовать массив.
Это был мой код:
let payload = {
guess: this.userInput.value
};
this.props.dispatch(checkAnswer(payload));
Решение:
// let payload = {
// guess: this.userInput.value
// };
this.props.dispatch(checkAnswer(this.userInput.value));
Проблема происходит потому, что нагрузка была посылать товар как объект. Когда я снял переменной полезной нагрузки и положить иначе, если один операнд значение в диспетчерской все начало работать как положено.
найдено: объект с ключами
Что означает, что вы передаете что-то есть "ключ-значение". Так что вы должны изменить свой обработчик:
onItemClick(e, item) {
this.setState({
lang: item,
});
}
onItemClick({e, item}) {
this.setState({
lang: item,
});
}
Вы пропустили скобки ({}
).
Я получил ту же ошибку, я изменил это
экспорт withAlert по умолчанию(предупреждения)`
для этого
экспорт по умолчанию withAlert()(предупреждения)`.
В старых версиях прежний код был в порядке , но в более поздних версиях он выдает ошибку. Так что используйте последующий код, чтобы избежать errror.