javascript - map 不输出任何东西，没有错误信息

Question

我有一个小应用程序，它从文本区域获取输入并将其与 JSON 文件进行匹配，目的是仅显示与文本区域的输入相匹配的 JSON 数据。

MakeList 功能运行良好(尽管在单击“输出 JSON”按钮两次之前它不起作用，如果有人能帮助我理解它会是一个奖励!)。我可以让该函数中的 map 在沿着数组向下移动时创建文本节点，但我想以 React 方式进行。但是，#results-area 中的 map 没有做任何事情，我不确定为什么。没有错误消息。

import React, {useState} from 'react';

let cardMasterList = require('./scryfall-oracle-cards.json')

function CardFinder() {

    let [listEntries, setListEntries] = useState([])

    function MakeList(e) {
        e.preventDefault()
        setListEntries(document.querySelector('#entry-textarea').value.split('\n').sort())
        listEntries.map((theCard,cardItem) => {
            cardMasterList
                .filter(({name}) => name === theCard)
                .map((cardNameMap) => {
                    let cardData = JSON.stringify(cardNameMap)
                    console.log(cardData)
                    document.querySelector('#json-output').innerHTML = JSON.stringify(cardNameMap)
                })
        })
    }

    function DontDoIt(e) {
        e.preventDefault()
    }

    return(
        <section id="card-finder-output">

            <form id="entry-form" onSubmit={() => {DontDoIt()}}>
                <textarea id="entry-textarea"></textarea>
                <button className="astbutton" onClick={MakeList}>Output JSON</button>
            </form>

            <aside id="results-area">
            {
                listEntries.map((theCard,cardItem) => {
                    cardMasterList
                        .filter(({name}) => name === theCard)
                        .map((cardNameMap) => {
                            return(<span key={cardItem}>{JSON.stringify(cardNameMap)}</span>)
                        })
                })
            }
            </aside>

            <aside id="json-output"></aside>
        </section>
    )

}

export default CardFinder

一旦我有了输出，我打算将它复制到一个文本文件并暂时将其用作数据库 - 但稍后我将尝试使用实际的数据库。

Answer 1

这里:

                listEntries.map((theCard,cardItem) => {
                    cardMasterList
                        .filter(({name}) => name === theCard)
                        .map((cardNameMap) => {
                            return(<span key={cardItem}>{JSON.stringify(cardNameMap)}</span>)
                        })
                })

我想你想要:

                listEntries.map((theCard,cardItem) => (
                    cardMasterList
                        .filter(({name}) => name === theCard)
                        .map((cardNameMap) => {
                            return(<span key={cardItem}>{JSON.stringify(cardNameMap)}</span>)
                        })
                ))

或者:

                listEntries.map((theCard,cardItem) => {
                    return cardMasterList
                        .filter(({name}) => name === theCard)
                        .map((cardNameMap) => {
                            return(<span key={cardItem}>{JSON.stringify(cardNameMap)}</span>)
                        });
                })

第一个创建 cardMasterList 的过滤映射，但随后将其丢弃。后两者返回一个过滤、转换的 cardMasterList(生成一些 HTML)，这看起来像您想要的。

我不确定这是否是唯一的问题，因为它还取决于数据的形状。

我还建议做一些额外的验证(通过 prop 类型或自己动手)和可能的单元测试来检查像这样的复杂映射/过滤的行为。如果您在一开始编写代码时就这样做，您可能会避免一些错误，并且更容易通过逻辑进行推理(现在和重新访问它时，可能比您预期的要晚得多)。