#javascript #reactjs #object #frontend #syntax-error
#язык JavaScript #реагирует на #объект #внешний интерфейс #синтаксическая ошибка
Вопрос:
До сих пор мой код работал нормально. Пока мне не пришлось изменить файл данных и создать внутри него вложенный массив. Я получаю ошибку: Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {one, B, C, D, E, G, H, I, L, M, N, P, Q, R, S}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.
Ниже приведен мой компонент таблицы
import React from "react"; import tableData from "./tableData1.js"; const TableComponent = ({ data }) =gt; { let headings = Object.keys(data[0]); return ( lt;table className="table table-dark table-striped"gt; lt;theadgt; lt;trgt; lt;th colspan="16"gt;Dimensions in mmlt;/thgt; lt;/trgt; lt;tr scope="col"gt; lt;thgt;Serieslt;/thgt; {headings.map((heading) =gt; ( lt;thgt;{heading}lt;/thgt; ))} lt;/trgt; lt;/theadgt; lt;tbodygt; {data.map((item) =gt; ( lt;tr scope="col"gt; lt;th scope="row"gt;Series No.lt;/thgt; {headings.map((heading) =gt; ( lt;tdgt;{item[heading]}lt;/tdgt; ))} lt;/trgt; ))} lt;/tbodygt; lt;/tablegt; ); }; const TableGenerator = ( {targetID} ) =gt; { const filteredData = tableData.filter(item =gt; item.id == targetID ).map(item =gt; item.value); return lt;TableComponent data={filteredData} /gt;; }; export default TableGenerator; А вот файл данных, в котором в настоящее время используются только некоторые макетные данные для тестирования.
const tableData1 = [ { id: 1, value: [ { one: "Value", B: "Value", C: "Value", D: "Male", E: "Value", G: "Value", H: "Value", I: "Value", L: "Value", M: "Value", N: "Value", P: "Value", Q: "Value", R: "Value", S: "Value", }, { one: "Value", B: "Value", C: "Value", D: "Male", E: "Value", G: "Value", H: "Value", I: "Value", L: "Value", M: "Value", N: "Value", P: "Value", Q: "Value", R: "Value", S: "Value", }, ], }, { id: 2, value: [ { two: "Value", B: "Value", C: "Value", D: "Male", E: "Value", G: "Value", H: "Value", I: "Value", L: "Value", M: "Value", N: "Value", P: "Value", Q: "Value", R: "Value", S: "Value", }, { two: "Value", B: "Value", C: "Value", D: "Male", E: "Value", G: "Value", H: "Value", I: "Value", L: "Value", M: "Value", N: "Value", P: "Value", Q: "Value", R: "Value", S: "Value", }, ], } ] Ранее у меня было это в формате ниже:
const tableData1 = [ { id: 1, value: { one: "Value", B: "Value", C: "Value", D: "Male", E: "Value", G: "Value", H: "Value", I: "Value", L: "Value", M: "Value", N: "Value", P: "Value", Q: "Value", R: "Value", S: "Value", } }, { id: 2, value: { two: "Value", B: "Value", C: "Value", D: "Male", E: "Value", G: "Value", H: "Value", I: "Value", L: "Value", M: "Value", N: "Value", P: "Value", Q: "Value", R: "Value", S: "Value", } } ] Я предполагаю, что я должен отобразить это по-другому или что-то в этом роде, но я, кажется, не могу понять это, куда бы я ни посмотрел. Кто-нибудь может помочь в этом?
Комментарии:
1. Я теряюсь в том, какой тип этого должен работать, макет или предыдущие данные?
2. const filteredData = табличные данные.фильтр(элемент =gt; item.id == TargetID ).карта(элемент =gt;gt; элемент.значение); в методе карты каждый элемент: [ { один: «Значение», B: «Значение», C: «Значение», D: «Мужчина», …}, { один: «Значение», B: «Значение», C: «Значение», D: «Мужчина», …}] таким образом, вам нужна другая карта для каждого из этих элементов, и зачем вам может понадобиться дубликат объекта?
3. Рассматривается как значение, которое превратилось из одноэлементного объекта в массив объектов. Разве вы сейчас не хотите визуализировать несколько компонентов таблицы?.. Поскольку TableComponent ожидает объект, а не массив..
4. @Венковский макет данных, которыми я поделился первым, — это то, где мне нужно, чтобы он работал, так как он уже работает для второго.
5. @Ebay то, чего я в основном пытаюсь достичь, — это объект.ключи предназначены для получения всех заголовков от каждого из объектов внутри массива значений, а остальная часть кода предназначена для создания строк под этими заголовками на основе значений этих заголовков(свойств), если это имеет какой-либо смысл.
Ответ №1:
Поскольку в вашей новой структуре value сам по себе массив, на самом деле у вас есть вложенный массив, вы можете обновить filterData его следующим образом:
const filteredData = tableData.filter(item =gt; item.id == targetID).reduce((acc, item)=gt;{ acc = [...acc, ...item.value] return acc; } , []); Комментарии:
1. это сделало это! Я был немного смущен тем, как правильно получить доступ к этим данным, и это работает просто отлично. предыдущий ответ тоже сработал, кстати. Спасибо!