映射后如何过滤组件?

how to filter a component after it's been mapped?

我正在过滤我的 jokeComponents 数组以返回少于 x 个字符的笑话数组。

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

然后我尝试 运行 jokeComponents 上的过滤器方法,但它 return 编辑了一个空数组。 我应该在哪里 运行 这个过滤方法?

如果我像这样直接在 jokesData 上做,

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

我无法 return 该组件。

我是否向我的组件指定它需要少于 x 个我想要 returned 的字符?我是否需要 运行 在组件的 prop 中使用这个过滤方法? (我试过了,但它给了我一个错误)。

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)
  1. 条件渲染:
    return(
      jokesData.map(joke => {
        joke.length < 100 ? <Joke ... /> : null
      })
    )
  1. 使用函数更新 jokesData 数组(可能是单击)
      const updateJokes = () => {
        setJokesData(jokesData.filter(joke => joke.length<100))
      } 
  1. 使用效果:
  useEffect(() => {
    setJokesData(jokesData.filter(joke => joke.length < 100))
  }, [jokesData, setJokesData])

你应该这样尝试:

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

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

}

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

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

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

}