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

2024-05-14 • 问答

我正在尝试在字符串数组上使用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>

传入列表似乎很好，并用常量替换映射中的字符串可解决此问题。下面是有问题的功能。

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}/>
        );
}

尝试将方法更改为此，我想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}/>
        );
}

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

遍历原始数组（子任务）而不是字符串数组可解决此问题，并导致代码更紧凑。

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}/>
        );

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

c349534161 回答：地图无法创建单独的段落标签

大家都在问