Как получить доступ к нескольким элементам массива без использования аксиом
Вчера я увидел проект React на YouTube и захотел протестировать его сам.
Эта функция подключается к ссылке и возвращает мне вопросы категории и сложности, которые я выбрал с помощью кнопок. код работает нормально, но я не хочу делать этот шаг с аксиомами и любыми вещами, связанными с API.
const fetchQuestions = async (category = "", difficulty = "") => {
const { data } = await axios.get(
`https://opentdb.com/api.php?amount=10${
category && `&category=${category}`
}${difficulty && `&difficulty=${difficulty}`}&type=multiple`
);
console.info(category);
console.info(difficulty);
setQuestions(data.results);};
Я хочу видеть только вопросы той сложности и категории, которые я выбрал. Итак, я создал файл json и попытался получить эти вопросы и ответы и т. д., Но это не сработало. Я пытался сопоставить вещи внутри и зарегистрировать категорию и сложность, но я даже не могу добраться до них. Я знаю, что мне нужны некоторые условия и т. д., но я не могу создать логику.
const fetchQuestions =(category = "",difficulty = "")=>{const {data}=QuestionList.results.map((q)=> (console.info(category),console.info(q[category]),console.info(data),console.info(q[difficulty]))); setQuestions(data.results);}
это файл json: questions.json -> я импортировал как QuestionList
{
"response_code": 0,
"results": [
{
"category": "Books",
"type": "multiple",
"difficulty": "medium",
"question": "some question?",
"correct_answer": "blabla",
"incorrect_answers": ["Transformers", "Care Bears", "Rubik’s Cube"]
},
{
"category": "Books",
"type": "multiple",
"difficulty": "easy",
"question": "sdklgksdflgjsdf",
"correct_answer": "Badminton",
"incorrect_answers": ["Table Tennis", "Rugby", "Cricket"]
},
{
"category": "Books",
"type": "multiple",
"difficulty": "medium",
"question": "fgdfgdfgdfgdfgg?",
"correct_answer": "9",
"incorrect_answers": ["6", "10", "3"]
},
{
"category": "Films",
"type": "multiple",
"difficulty": "medium",
"question": "asdasdasdasd",
"correct_answer": "Parlor",
"incorrect_answers": ["Open Room", "Sitting Room", "Loft"]
},
{
"category": "Films",
"type": "multiple",
"difficulty": "medium",
"question": "asdasdasddddd",
"correct_answer": "Link",
"incorrect_answers": ["Wario", "Q*bert", "Solid Snake"]
}
]}
Я застрял на этом в течение 9 часов, но у меня до сих пор нет решения :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема
const fetchQuestions = (category = "", difficulty = "") => { const { data } = QuestionList.results.map( (q) => ( console.info(category), console.info(q[category]), console.info(data), console.info(q[difficulty]) ) ); setQuestions(data.results); };
Приведенный выше код вызывает функцию Array.prototype.map, но обратный вызов возвращает выражение оператора запятой, и возвращается значение последнего операнда. Однако console..log является пустым возвратом, поэтому undefined возвращается как значение карты. Кроме того, .map возвращает массив, а не объект, поэтому нет свойства data для деструктуризации сопоставленного массива. Более поздний доступ к data.results, вероятно, вызовет TypeError, что-то вроде «невозможно получить доступ к« результатам »неопределенного».
Решение
Если я правильно понял ваш вопрос, вы только что создали импортированный локальный файл questionList JSON и хотите отфильтровать результаты по некоторым критериям поиска.
Пример:
const [questions, setQuestions] = useState([]);
const fetchQuestions = (category = "", difficulty = "") => {
const data = questionList.results.filter(
(question) =>
question.category.toLowerCase().includes(category.toLowerCase()) &&
question.difficulty.toLowerCase().includes(difficulty.toLowerCase())
);
setQuestions(data);
};
useEffect(() => {
fetchQuestions();
}, []);
fetchQuestions();- возвращает все 5 результатовfetchQuestions("books");- возвращает 3 записи категории "книги"fetchQuestions("", "easy");- возвращает 1 запись "легкого" уровня сложности
Прежде всего, большое спасибо за это решение, оно сработало, и когда я вызываю fetchQuestions(); Функция в моем домашнем компоненте показывает все вопросы, и викторина также работает нормально. если я изменю функцию как fetchQuestions("books"); он показывает вопросы о книгах. Как я могу сделать это более динамичным? Прямо сейчас у меня есть <select value = {category} onChange = {(e) => setCategory(e.target.value)}> {Categories.map((cat) => (<option key = {cat.category} value = {cat.value}>{cat.category} </option>))} это для моих категорий, и у меня есть кнопка, которая вызывает функцию handleSubmit (у меня есть функция fetchQuestions)
const handleSubmit = () => {fetchQuestions();}; return ( <div className = "settings_select"><select value = {category} onChange = {(e) => setCategory(e.target.value)}>{Categories.map((cat) => (<option key = {cat.category} value = {cat.value}> {cat.category} </option>))}<select onChange = {(e) => setDifficulty(e.target.value)} value = {difficulty}><option key = "Easy" value = "easy"> easy</option><option key = "Medium" value = "medium"> medium </option> </select> <button className = "button" onClick = {handleSubmit}>Start Quiz</button> </div> мой код выглядит так @Drew Reese
@SercanKuduscu Извините, я думал, что ваш вопрос касается начального отображения, поэтому я не включил динамическую фильтрацию. Все выглядит правильно или очень близко, если не совсем работает. Вот раздвоенная песочница моего кода выше с формой и входными данными.
Ты лучший мужчина, ты не представляешь, как мне помог этот. Большое спасибо ! :)
Это зависит от используемых дополнительных фреймворков. Если вы используете веб-пакет, вы можете использовать плагин копирования Webpack, чтобы скопировать файл JSON в статическую папку, которая передается клиенту, а затем вы можете сделать что-то вроде fetch("static/questions.json"), чтобы получить вопросы от json. www.multiplesight.com/guides/…