我是 React-Redux 的新手。我其实知道这个问题是一个非常基本的问题,
在这里,我有一个类似的对象,
questionsCount : [ {
Id : "CSS"
count: "1",
level:"Easy",
type: Non_code},{
Id : "CSS"
count: "2",
level:"Medium",
type: code},
{
Id : "CSS"
count: "5",
level:"Tough",
type: code},
{
Id : "java"
count: "2",
level:"Tough",
type: Non-code},
{
Id : "Html"
count: "4",
level:"Easy",
type: code},]
现在,我有一个选择下拉列表,我想在其中创建一个选项,所以我尝试了
return this.state.questionsCount.map((item) =>
<option key={item.Id}>{item.Id}</option>
);
In the props I get the level type.
现在,这是使用重复 ID 创建所有选项元素的过程。
现在,我想做的是,
选项元素将类似于,首先它应该只提供级别元素的含义,
css code:0,Non_code:1
所以,目前它正在被复制。
它被重复,因为 Id 被重复。谁能帮我这个 ?谢谢
在这里,我有那个对象。现在,在该对象中有多个具有 Id 、 count 、 level 和 type 的对象。
现在,我想从这个对象中创建选择选项。
它具有三个差异级别。
预期输出如下, 它将只有简单的级别
<option>Css code:0,non_code-1></option>
<option>Html code:4,non_code-0></option>
对于艰难的选择,
<option>Css code:5,non_code-1></option>
<option>java code:0,non_code-2></option>
中等和困难的情况相同。
一种技术可以具有简单、中等或困难类型的代码类型或非代码类型问题。因此,我想根据级别创建该技术的下拉菜单。
如果代码或非代码不存在,则其值为 0。
最佳答案
根据我对您的情况的了解,您希望根据难度级别创建一个选择下拉列表。为了实现这一点,您需要在渲染之前首先根据困难来过滤我们的问题,例如
processQuestions(questionsCount, difficulty) {
const res = questionsCount.filter(item => item.level === difficulty);
return res.reduce((acc, item) => {
if (acc[item.Id]) {
acc[item.Id] = { ...acc[item.Id], [item.type]: acc[item.Id][item.type]? acc[item.Id][item.type] + 1 : 1};
} else {
acc[item.Id] = { [item.type]: 1};
}
return acc;
}, {})
}
render() {
const { difficulty } = this.props;
const questionsData = this.processQuestions(this.state.questionCount, difficulty);
return Object.entries(questionsData).map(([questionId, data]) => {
return (
<option key={questionId}>{questionId} code: {data.code} non_code: {data['Non-code']}</option>
)
})
}
关于javascript - 在 React js 中从对象创建一个选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53274865/