TypeError：records.map 不是反应中的函数答案

【问题标题】：TypeError: records.map is not a function in reactTypeError：records.map 不是反应中的函数
【发布时间】：2020-11-19 23:21:25
【问题描述】：

当我尝试将数据从道具映射到表时，我收到此错误“TypeError：records.map 不是函数”。请帮帮我

当我 console.log 时数据看起来像这样

(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}

这是作为 props 传递给 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>

【问题讨论】：

有些事情没有意义。如果[relatedTicker] 是您console.loged 的数组，那么relatedTicker 是什么？
我 console.logged relatedTicker 不是 [relatedTicker]。我添加了括号，看看这是否是问题所在。
抱歉 - 我的意思是，如果您正在迭代 [relatedTicker]，那么它包含一个元素，即数组 relatedTicker
我将其更改为仅迭代 relatedTicker 并得到 TypeError: records.map is not a function。我从 rest api 调用中获取数据并尝试将其作为道具传递给组件。

标签： javascript reactjs function dictionary

【解决方案1】：

问题似乎是在变量记录为空的情况下，您的渲染函数仍然尝试访问您的记录变量的映射函数，这当然以'TypeError：records.map不是函数结束' 错误。

您必须检查记录是否为空，如果它不为空，则仅映射它的数据。您可以使用Nullish coalescing operator (??) 来执行此操作：

{records && records.map((record, index) = ....}

【讨论】：

有效！感谢您花时间帮我看这个！！

【解决方案2】：

另一种解决方案是将数据数组设置为状态，然后将数组从状态传递给子组件并通过道具使用它

【讨论】：