Question

import javafx.application.Application;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.TextField;

import javafx.scene.layout.GridPane;

import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {

@Override

public void start(Stage primaryStage) {

int SIZE = 10;

int length = SIZE;

int width = SIZE;

GridPane root = new GridPane();

for(int y = 0; y < length; y++){

for(int x = 0; x < width; x++){

Random rand = new Random();

int rand1 = rand.nextInt(100);

我想在每个商品地图上使用车把模板。但是由于某种原因，我不断收到“ fetch（...）。then（...）。then（...）。map不是函数”

这是完整的代码

function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';
  const imgBlock = fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  )
    .then(data => {
      return data.json();
    })
    .then(pic => pic.hits)
    .map(item => template(item).join(''));
  refs.list.insertAdjacentHTML('beforeend', imgBlock);
}

HANDLEBARS

import './styles.css';
import template from './templates/template.hbs';

const api = {
  key: '#',
  querySearch: '',
  pageNum: 1,
};

const refs = {
  list: document.querySelector('.gallery'),
  form: document.querySelector('#search-form'),
  input: document.querySelector('input'),
};

refs.input.addEventListener('input', catchInput);

function catchInput(event) {
  console.log(event.target.value);
  getResults(refs.input.value);
  console.log(refs.input.value);
}

function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';
  const imgBlock = fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  )
    .then(data => {
      return data.json();
    })
    .then(pic => pic.hits)
    .map(item => template(item).join(''));
  refs.list.insertAdjacentHTML('beforeend', imgBlock);
}

Answer 1

您可以使用Promises做很多事情，但是map()却不是。不过，您可以轻松地重写它：

function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';

  const imgBlock = fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  )
    .then(data => data.json())
    .then(json => {
      let imgBlock = json.hits.map(item => template(item).join(''));

      refs.list.insertAdjacentHTML('beforeend', imgBlock);
    })
}

记住imgBlock 是一个承诺，并且在解决之前，insertAdjacentHTML绝对没有用。您过早执行该代码，必须放入then回调中。

如果您可以使用async，则此代码非常简单，并且易于遵循：

async function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';

  const data = await fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  );

  let json = await data.json();
  let imgBlock = json.hits.map(item => template(item).join(''));

  refs.list.insertAdjacentHTML('beforeend', imgBlock);
}

您可以做的任何减少JavaScript嵌套的事情通常都是巨大的成功，因此，我建议使用这种方法。

由于某种原因，我得到了：fetch（...）。then（...）。then（...）。map不是一个函数

1 个答案: