ReactJS - чтение данных json
Я пытаюсь заполнить данные таблицы, импортируя json. Однако, получая ошибку ниже: Неперехваченное нарушение инварианта: объекты недействительны в качестве дочерних элементов React (найдено: объект с ключами { list }). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.
Ниже приведен код, который я использую:
import reg from "./data/reg.json";
class TableRow extends Component {
render() {
const { data } = this.props;
const list = data.map(adata => {
return (
<tr>
<React.Fragment>
<td key = {adata.FName}>{adata.FName}</td>
<td key = {adata.LName}>{adata.LName}</td>
<td key = {adata.Age}>{adata.Age}</td>
</React.Fragment>
</tr>
)//return
})//regionslist
return (
{ list }
);//return
} //render
} //class
class DTable extends Component {
render() {
return (
<Table striped bordered hover>
<TableHeader />
<tbody>
<TableRow data = {this.props.data} />
</tbody>
</Table>
);
}
}
class DataTable extends Component {
render() {
return (
<DTable data = {reg} />
);//return
} //render
}[{ "FName": "Джон", "LName": "M", "Возраст": "42" }, { "FName": "Майкл", "LName": "S", "Возраст": "30 " }]
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема
Я воссоздал вашу настройку, пытаясь воспроизвести вашу ошибку. Вы можете увидеть, что я воспроизвел здесь: Stackblitz. Проблема, по-видимому, заключается в том, что ваша карта создает некоторые строки таблицы, но нет родительского элемента для их переноса, что требуется для JSX.
Решение
Это можно исправить, обернув {list} внутри React.Fragment:
class TableRow extends Component {
render() {
const { data } = this.props;
const list = data.map(adata => {
return (
<tr>
<td key = {adata.FName}>{adata.FName}</td>
<td key = {adata.LName}>{adata.LName}</td>
<td key = {adata.Age}>{adata.Age}</td>
</tr>
)//return
})//regionslist
return (
<React.Fragment>
{ list }
</React.Fragment>
);//return
} //render
} //class
Добавление React.Fragment вокруг элементов списка решило проблему. Вы можете увидеть рабочее решение здесь: Stackblitz
Альтернативы
Начиная с React 16.2 (Подробнее) у вас также есть возможность возвращать пустые теги JSX вместо ввода React.Fragment. Приведенное выше решение будет выглядеть так:
class TableRow extends Component {
render() {
const { data } = this.props;
const list = data.map(adata => {
return (
<tr>
<td key = {adata.FName}>{adata.FName}</td>
<td key = {adata.LName}>{adata.LName}</td>
<td key = {adata.Age}>{adata.Age}</td>
</tr>
)//return
})//regionslist
return (
<>
{ list }
</>
);//return
} //render
} //class
Наконец, начиная с React 16.0, также можно возвращать массив элементов. Если вы решите сделать это, приведенный выше код будет выглядеть так:
class TableRow extends Component {
render() {
const { data } = this.props;
const list = data.map(adata => {
return (
<tr>
<td key = {adata.FName}>{adata.FName}</td>
<td key = {adata.LName}>{adata.LName}</td>
<td key = {adata.Age}>{adata.Age}</td>
</tr>
)//return
})//regionslist
return [list];//return
} //render
} //class
Однако ограничение этой опции заключается в том, что к элементам необходимо добавить ключ, поскольку в противном случае React выдаст это предупреждение в консоли:
Warning: Each child in a list should have a unique "key" prop.
Обратите внимание, что даже если вы опустите этот ключ, он все равно будет правильно отображаться.
Изначально в React было ограничение, что вы можете вернуть только один элемент из функции рендеринга, но после React 16 оно было изменено. Теперь вы можете возвращать массив элементов.
В вашем случае вы пытаетесь создать массив элемента, не упоминая, что это массив, из-за которого вы должны сгруппировать его с помощью Fragment.
Эту проблему можно решить двумя способами:
Оберните массив внутри
Fragmentили любого другого элемента контейнера (но в этом случае он добавит один дополнительный узел в DOM, что плохо, и для решения этой проблемы вводятсяFragment's. подробнее см. здесь: https://reactjs.org/docs/fragments.html)return ( <React.Fragment> { list } </React.Fragment> );Вернуть массив.
return ([ list ]);
Можем ли мы взглянуть на этот файл json?