Блог

Главная - Вопросы по программированию - Ошибка типа: records.map не является функцией в react

Ошибка типа: records.map не является функцией в react

#javascript #reactjs #function #dictionary

#javascript #reactjs #функция #словарь

Вопрос:

Я получаю эту ошибку «TypeError: records.map не является функцией», когда я пытаюсь отобразить данные в таблицу из реквизитов. Пожалуйста, помогите мне

данные выглядят так, когда я консолью.запишите это

 (82) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/87cb30d8-80df-11ea-8951-00000000092a.png", ticker: "AAPL", name: "Apple Inc", marketCapitalization: 2068723}
1: {finnhubIndustry: "Technology", logo: null, ticker: "ALJJ", name: "ALJ Regional Holdings Inc", marketCapitalization: 41}
2: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/9564945e-80df-11ea-9144-00000000092a.png", ticker: "ALLT", name: "Allot Ltd", marketCapitalization: 0}
3: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/95ff91b4-80df-11ea-a942-00000000092a.png", ticker: "ALOT", name: "AstroNova Inc", marketCapitalization: 50}
4: {finnhubIndustry: "Technology", logo: null, ticker: "ALRM", name: "Alarm.com Holdings Inc", marketCapitalization: 2874}
5: {finnhubIndustry: "Technology", logo: null, ticker: "ALTR", name: "Altair Engineering Inc", marketCapitalization: 2919}
6: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/af289222-80da-11ea-a616-00000000092a.png", ticker: "ALYA.TO", name: "Alithya Group Inc", marketCapitalization: 132}
7: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/a393333e-80df-11ea-819f-00000000092a.png", ticker: "ASUR", name: "Asure Software Inc", marketCapitalization: 109}
8: {finnhubIndustry: "Technology", logo: null, ticker: "ATEN", name: "A10 Networks Inc", marketCapitalization: 572}
9: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/b9784a8c-80df-11ea-9db3-00000000092a.png", ticker: "BSQR", name: "Bsquare Corp", marketCapitalization: 19}
10: {finnhubIndustry: "Technology", logo: "https://static.finnhub.io/logo/bbbad626-80d4-11ea-a7d3-00000000092a.png", ticker: "COUP", name: "Coupa Software Inc", marketCapitalization: 19170}

Это передается в industryTable.js в качестве реквизита

industryTable.js

 const IndustryTable = ({ ticker, relatedTicker }) => { //relatedTicker passed in as props
    const records = [relatedTicker]; 
    console.log(relatedTicker); //see console.log above

...title and other jsx...

                    <tbody>
                        {records.map((record, index) => { //const. map over each column I needed
                            return (
                                <tr key={index}>
                                    <td>{record.ticker}</td>
                                    <td>{record.name}</td>
                                    <td>{record.marketCapitalization}</td>
                                    <td>{record.finnhubIndustry}</td>
                                </tr>
                            );
                        })}
                    </tbody>

Комментарии:

1. Что-то не имеет смысла. Если [relatedTicker] это массив, который вы console.log отредактировали, то что relatedTicker ?

2. Я консоль. зарегистрирован relatedTicker не [relatedTicker] . Я добавил скобки, чтобы посмотреть, была ли это проблема.

3. Извините — я имел в виду, что если вы выполняете итерацию [relatedTicker] , то она содержит один элемент, который является массивом relatedTicker

4. Я изменил его на итерацию просто relatedTicker и получаю TypeError: records.map is not a function . Я получил данные из вызова rest api и попытался передать их в качестве реквизита компоненту.

Ответ №1:

Проблема, по-видимому, заключается в том, что в случае, когда переменные records имеют значение null, ваша функция рендеринга все еще пытается получить доступ к функции map вашей переменной records, что, конечно, заканчивается ошибкой ‘TypeError: records.map не является функцией’.

Вы должны проверить, имеет ли значение records значение null, и сопоставить его данные только в том случае, если оно не равно null. Вы можете использовать нулевой оператор объединения (??), чтобы сделать это следующим образом:

 {records amp;amp; records.map((record, index) = ....}

Комментарии:

1. Это работает! Спасибо, что нашли время, чтобы посмотреть на это для меня!!

Ответ №2:

другое решение — установить массив ваших данных в состояние, затем передать массив из состояния в дочерний компонент и использовать его с реквизитами