Question

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

MakeList函数的效果很好（尽管只有两次单击“ Output JSON”按钮，该函数才能起作用，如果有人可以帮助我理解这将是一个额外的好处！）。我可以在该函数中使用地图，使其沿着数组向下移动时仅创建文本节点，但是我想以React的方式进行操作。但是，#results-area内的地图没有做任何事情，我不确定为什么。没有错误消息。

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），看起来像您想要的。

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

我还建议进行一些附加的验证（通过道具类型或自己动手做），并可能进行单元测试，以检查像这样的复杂映射/过滤的行为。如果您一开始就编写代码，则可以避免一些错误，并可以更轻松地通过逻辑推理（现在和重新访问时，可能比您期望的要晚得多）。

地图未输出任何内容，没有错误消息

1 个答案: