TypeError: records.map不是一个有反应的函数

Question

当我试图从道具将数据映射到表中时，我得到了'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}

它作为道具传递给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>

Answer 1

问题似乎是，在变量记录为null的情况下，您的呈现函数仍然试图访问记录变量的映射函数，当然，该函数的结尾是'TypeError: records.map不是函数‘错误。

您必须检查记录是否为null，如果记录为null，则只能映射其数据。您可以使用Nullish合并算子(??)这样做：

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

Answer 2

另一种解决方案是将数据数组设置为状态，然后将数组从状态传递到子组件集，并使用它附带支持。