Javascript 映射后如何过滤组件？

我希望过滤我的笑话组件数组，以返回少于x个字符数的笑话数组

    const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)
    
    return (
        <div>
            {jokeComponents}            
        </div>
    )
}

然后我尝试在jokeComponents上运行filter方法，但它返回了一个空数组。 我应该在哪里运行此筛选方法

如果我直接在jokesData上这样做

const jokeComponents = jokesData.filter(joke => joke.length < 100)

我无法返回组件

---

我是否向我的组件指定它需要少于我想要返回的x个字符数？我是否需要在组件的道具中运行此筛选方法？我尝试过，但它给了我一个错误。

有几种方法可以做到这一点：

const jokeComponents = jokesData
    .filter(joke => joke.punchLine.length < 100)
    .map(joke => (<Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />))

对于所有这些，您需要使用jokesData作为状态变量：

const [jokesData, setJokesData] = React.useState(null)

条件呈现： 使用函数（可能是单击）更新jokesData数组 使用效果：

---

有几种方法可以做到这一点： 对于所有这些，您需要使用jokesData作为状态变量：

const [jokesData, setJokesData] = React.useState(null)

条件呈现： 使用函数（可能是单击）更新jokesData数组 使用效果：

---

你应该这样做：

    const jokeComponents = jokesData
                          .filter(item =>item.length <100)
                          .map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)

return (
    <div>
        {jokeComponents}            
    </div>
)

---

}

您应该这样尝试：

    const jokeComponents = jokesData
                          .filter(item =>item.length <100)
                          .map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)

return (
    <div>
        {jokeComponents}            
    </div>
)

---

}

您可以在映射时简单地设置条件，您可以添加索引作为映射的第二个参数，因此您的代码将类似于以下代码：

const jokeComponents = jokesData.map((joke,index) => index<100 && <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)

return (
    <div>
        {jokeComponents}            
    </div>
)

---

}

您可以在映射时简单地设置条件，您可以添加索引作为映射的第二个参数，因此您的代码将类似于以下代码：

const jokeComponents = jokesData.map((joke,index) => index<100 && <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)

return (
    <div>
        {jokeComponents}            
    </div>
)

---

}

这起作用了。我想，因为我的笑话json数据中有一个笑话未定义，所以没有列出，所以过滤掉了笑话。问题给了我错误：问题未定义。非常感谢。额外问题：是否可以在map方法中运行filter函数？map方法每个输入元素只返回一个元素，因此不能进行筛选。但是，您可以从映射中返回null元素：…mapx=>{if…return null；else return；}这是有效的。我想，因为我的笑话json数据中有一个笑话未定义，所以没有列出，所以过滤掉了笑话。问题给了我错误：问题未定义。非常感谢。额外问题：是否可以在map方法中运行filter函数？map方法每个输入元素只返回一个元素，因此不能进行筛选。但是，您可以从映射中返回null元素：…mapx=>{if…return null；else return；}yes！我想我还需要指定item.question或item.punchLine，以便它过滤掉我想要的内容。正如下面的另一条评论中所提到的，因为我在json数据中的一个笑话没有未定义的问题，所以当我试图过滤掉item.question或joke.question时，它给了我一个错误。非常感谢。对我想我还需要指定item.question或item.punchLine，以便它过滤掉我想要的内容。正如下面的另一条评论中所提到的，因为我在json数据中的一个笑话没有未定义的问题，所以当我试图过滤掉item.question或joke.question时，它给了我一个错误。非常感谢。