Как показать различное значение, возвращаемое функцией для каждого визуализированного элемента из API в ReactJS? - PullRequest
Новая
       16

Как показать различное значение, возвращаемое функцией для каждого визуализированного элемента из API в ReactJS?

0 голосов
/ 01 апреля 2019

Я делаю корзину для книжного магазина. Я использую API книг Google, но поскольку цены отсутствуют, я создал функцию, которая создает случайные значения для каждой книги, полученной из API. Есть ли способ для меня, чтобы представить разные значения для каждой книги? Он отображает только одно значение, которое является последним возвращенным значением для каждой книги.

Обратите внимание, что это только соответствующая часть кода: 

  constructor(props, context) {
    super(props, context);
    this.state = { books: [] };
  }

  // books are rendered on search
  onTermSubmit = (term) => {
    axios
      .get(`https://www.googleapis.com/books/v1/volumes?q=${term}${KEY}`)
      .then((res) => {
        this.setState({ books: res.data.items });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    const { books } = this.state;
    const someArr = [];
    let bookPrice = '';

    function getRandomPrices(min, max) {
      return Number((Math.random() * (max - min) + min).toFixed(2));
    }

    // for each book
    books.forEach((book) => {
      // get random price
      bookPrice = getRandomPrices(2, 25);
      // and assign it as a book price
      someArr.push(bookPrice);
    });

    return (
      <div>
        <ul>
          {books.map((book) => (
            <li key={book.id}>
              <div className="row">
                <div className="col">
                  <h4>{book.volumeInfo.title}</h4>
                  <h6>author: {book.volumeInfo.authors}</h6>
                  <p>
                    <small>pages: {book.volumeInfo.pageCount}</small>
                  </p>
                  //HAVE NO IDEA HOW TO RENDER DIFFERENT PRICES, IT RENDERS SAME VALUE FOR EACH BOOK
                      price: 
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }

1 Ответ

1 голос
/ 01 апреля 2019

Как правильно сказал @charlietfl, случайные цены должны генерироваться именно там, где для массива books устанавливается состояние.

Сначала я сделал вашу вспомогательную функцию методом класса: 

  getRandomPrices = (min, max) => {
    return Number((Math.random() * (max - min) + min).toFixed(2));
  };

Затем я создал то же самое, сгенерировал случайный price и сопоставил новый измененный массив книг, который содержит ваш ответ и случайную цену: 

  onTermSubmit = (term) => {
    axios
      .get(`https://www.googleapis.com/books/v1/volumes?q=${term}${KEY}`)
      .then((res) => {
        let books = res.data.items;
        books = books.map((bookObj) => ({
          ...bookObj,
          price: this.getRandomPrices(2, 25)
        }));
        this.setState({ books });
      })
      .catch((error) => {
        console.log(error);
      });
  };

И удалил весь избыточный код из render: 

  render() {
    // const { books } = this.state;
    // const someArr = [];
    // let bookPrice = '';

    // // for each book
    // books.forEach((book) => {
    //   // get random price
    //   bookPrice = getRandomPrices(2, 25);
    //   // and assign it as a book price
    //   someArr.push(bookPrice);
    // });

    return (
...