Создайте опцию выбора в реакции js из объекта
I я новичок в 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.
Итак, вот что создается все элементы option с повторяющимися идентификаторами.
Теперь я хочу, чтобы
элемент option будет похож, сначала он должен содержать только предоставленные значения элементов уровня,
css code:0,Non_code:1
Итак, в настоящее время он дублируется.
Его дублируют, потому что Id повторяется. Кто-нибудь может мне с этим помочь ? Спасибо
Вот этот предмет у меня. Теперь в этом объекте есть несколько объектов, у которых есть идентификатор, количество, уровень и тип.
Теперь из этих объектов я хочу создать варианты выбора из этого.
Он имеет три уровня различий.
ожидаемый результат будет таким, Будет только легкий уровень
<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.
хорошо добавлю это
@ShubhamKhatri Я только что обновил свой код
Одна вещь заключается в том, что в props я получаю props.type, который сообщает, какой тип в данный момент нам нужен для итерации. Я имею в виду легкий или жесткий или средний
@ShubhamKhatri, ты понял, о чем я хочу спросить?
откуда вы берете информацию об уровне. также какая комбинация ключей будет уникальной для вашего объекта данных
Я передаю его в качестве реквизита компоненту выбора. Комбинация похожа на идентификатор, уровень, тип, это ключи, идентификатор может быть таким же, я имею в виду, что css может иметь простой, средний или жесткий уровень, каждый из которых может иметь код без типа кода.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Насколько я понимаю в вашем случае, вы хотите создать раскрывающийся список для выбора в зависимости от уровня сложности. Для этого вам нужно будет сначала отфильтровать наш вопрос на основе трудностей, прежде чем рендеринг, например
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>
)
})
}
@shubhamKhatri спасибо за ваше решение. Работал отлично
Не можете понять, чего именно хотите достичь. Не могли бы вы показать ожидаемый результат