Question

地图无法创建单独的段落标签

2019-11-17

253

javascript reactjs jsx

我尝试在字符串数组上使用 map 来获取以标题开头的多个段落，但所有字符串都出现在同一个段落标记中。我期望

<h3> Header 1 </h3>
<p> String 1 </p>
<h3> Header 2 </h3>
<p> String 2 </p>

，但得到的是

<h3> Header 1 </h3>
<p> String 1String 2  </p>
<h3> Header 2 </h3>

传入列表似乎没问题，用常量替换 map 中的字符串解决了该问题。以下是相关函数。

function instructionsRenderer(subtasks, element_name)
{
        var elements = [subtasks.map((subtask) => subtask['data']['text'])]
        console.log(elements)
        var zipElems = zip(INSTRUCTIONS_SUBTASKS,elements)
        /*const dispElem = zipElems.map((elem) => <div>
                <h3> {elem[0]} </h3>
                <p> {elem[1]} </p>
                </div>)*/
        const dispElem = elements.map((elem) => <p> {elem} </p>)

        console.log(dispElem)
        return(
        <Collapsible element={<div> {dispElem} </div>} element_name={element_name}/>
        );
}

Answer 1

尝试将您的方法更改为此，我猜 elements 数组只有一个项目。

function instructionsRenderer(subtasks, element_name)
{
        // .map will return an array
        var elements = subtasks.map((subtask) => subtask['data']['text'])
        console.log(elements)

        var zipElems = zip(INSTRUCTIONS_SUBTASKS,elements)
        /*const dispElem = zipElems.map((elem) => <div>
                <h3> {elem[0]} </h3>
                <p> {elem[1]} </p>
                </div>)*/
        const dispElem = elements.map((elem) => <p> {elem} </p>)

        console.log(dispElem)
        return(
        <Collapsible element={<div> {dispElem} </div>} element_name={element_name}/>
        );
}

Answer 2

正如 Faisal 指出的那样，字符串数组的长度不同（1 而不是 4）。旧代码在 map 周围有方括号，这就是问题所在。

遍历原始数组 (substasks) 而不是字符串数组解决了这个问题，并产生了更紧凑的代码。

const dispElem = subtasks.map((subtask,idx) => <div onClick={() => setSelect(subtask['id'])}>
                <h3> {subtask['id']} </h3>
                <p key={idx}> {subtask['data']['text']} </p>
                </div>)
        return(
        <Collapsible element={<div> {dispElem} </div>} element_name={element_name}/>
        );