映射后如何过滤组件?
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)
- 条件渲染:
return(
jokesData.map(joke => {
joke.length < 100 ? <Joke ... /> : null
})
)
- 使用函数更新 jokesData 数组(可能是单击)
const updateJokes = () => {
setJokesData(jokesData.filter(joke => joke.length<100))
}
- 使用效果:
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>
)
}
我正在过滤我的 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)
- 条件渲染:
return(
jokesData.map(joke => {
joke.length < 100 ? <Joke ... /> : null
})
)
- 使用函数更新 jokesData 数组(可能是单击)
const updateJokes = () => {
setJokesData(jokesData.filter(joke => joke.length<100))
}
- 使用效果:
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>
)
}