正在尝试进行本地模拟 API 调用...但未被承诺错误捕获，我错过了什么？（可以提供任何代码示例）

Question

正在尝试创建自定义预订小部件组件，在此文件上，我正在执行异步 API 调用，但未被承诺错误捕获，无法读取属性未定义的长度.... 这是一个 JSX 文件，我正在使用一个简单的样板...使用二进制搜索的示例在响应数据之间迭代，其中 returns 两个 objects.need 以获取 id 和 [= 的值16=]本地包含的文件分别有primarycolor,contrastcolor,hovercolor,banner,logo的样式

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;

Answer 1

您正在尝试在此处使用过滤器和客户端：

   let settings = objectSearch(filter, clients);

甚至在它们被宣布之前（所以它们将是不可抗拒的）。您需要将此行放在：

之后

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

您应该查看 linting (ESLint) 或 TypeScript。他们可以在编译时警告您这些类型的错误。它确实简化了开发。

希望对您有所帮助。

正在尝试进行本地模拟 API 调用...但未被承诺错误捕获，我错过了什么？（可以提供任何代码示例）

Attempting a local mock API call ...but got uncaught in promise error what am I missing? (can provide any code samples)

widget

binary-search

async-await

reactjs

正在尝试进行本地模拟 API 调用...但未被承诺错误捕获，我错过了什么？ （可以提供任何代码示例）

Attempting a local mock API call ...but got uncaught in promise error what am I missing? (can provide any code samples)

widget

binary-search

async-await

reactjs

正在尝试进行本地模拟 API 调用...但未被承诺错误捕获，我错过了什么？（可以提供任何代码示例）