Попытка локального ложного вызова API ... но я не получил ошибку в обещании, что мне не хватает? (можем предоставить любые примеры кода) - PullRequest
Новая
       7

Попытка локального ложного вызова API ... но я не получил ошибку в обещании, что мне не хватает? (можем предоставить любые примеры кода)

0 голосов
/ 27 января 2020

Пытаясь создать пользовательский компонент виджета бронирования, в этом файле я делаю асинхронный вызов API, но не получил ошибку в обещании, не могу прочитать длину свойства undefined .... Это файл JSX, и я использую простой шаблон ... с использованием примера двоичного поиска для итерации между данными ответа, которые возвращают два объекта. Для получения значения идентификатора и включенного локально файла json имеются стили для основного цвета, контрастного цвета, hovercolor, баннера, и lo go соответственно 

import React, {useEffect, useState } from 'react';
import Form from '../components/Form';
import styles from '../Styles/style.css';
import getStyleFromDb from '../api/themes';
import axios from 'axios';

const App = () => {
   const [loading, setLoading] = useState(true);
   const [primary_color, set_primary_color] = useState('#fff');
   const [contrast_color, set_contrast_color] = useState('#ccc');
   const [hover_color, set_hover_color] = useState('#000000');
   const [banner, setBanner] = useState([]);
   const [logo, setLogo] = useState('');

   useEffect(() => {
    async function fetchData() {
      const config = {
        method: 'get',
        url: '/src/api/customThemes.json'
      }
      let res = await axios(config);
      function objectSearch(filter, clients) {
        let found = false;
        let position = -1;
        let index = 0;

        while(!found && index > clients.length) {
          if(list[index] == filter) {
            found = true;
            position = index;
          } else { 
            index += 1;
          }
        }
        return position;
       }
       let settings = objectSearch(filter, clients); 
       console.log('id response', res.data);
       let clients = res.data;
       let filter = clients.find((clients => clients.id) === '12345');
       settings = filter;
       set_primary_color(settings.primary_color);
       set_contrast_color(settings.contrast_color);
       set_hover_color(settings.hover_color);
       setLogo(settings.logo);
       setBanner(settings.banner);
       setLoading(false);
    }
    fetchData();

  }, []);

    if(loading) return 'loading';
  return(
    <div className={styles.container} >
      <img src="/src/assets/img/beach-background.jpg" className={styles.background} alt="Booking-Widget-Background" />
      <h1 className={styles.title}>
        Booking Widget
      </h1>
      <Form primary_color={primary_color} contrast_color={contrast_color} hover_color={hover_color} />
    </div>
    );
};

export default App;

1 Ответ

0 голосов
/ 27 января 2020

Вы пытаетесь использовать фильтр и клиентов здесь: 

   let settings = objectSearch(filter, clients);

до того, как они даже будут объявлены (поэтому они будут неопределенными). Вы должны поставить эту строку после: 

let filter = clients.find((clients => clients.id) === '12345');

Вы должны посмотреть на linting (ESLint) или TypeScript. Они могут предупредить вас во время компиляции об ошибках такого рода. Это действительно упрощает разработку.

Надеюсь, это поможет.

...