提升開發效率與 AI 工具應用高品質攻略 實踐打字與閱讀除錯加速技巧打造高效工作流

// 程式碼太多暗號
value[0][index] = sum;

// 滿滿的參數卻又未分類
<Grid
  data={gridData}
  pagination={false}
  autoSize={true}
  enableSort={true}
  sortOrder="desc"
  disableSelection={true}
  infiniteScroll={true}
  ...
/>

const options = {
  pagination: false,
  autoSize: true,
  enableSort: true,
  sortOrder: 'desc',
  disableSelection: true,
  infiniteScroll: true,
  ...
}

<Grid
  data={gridData}
  options={options}
/>

// 太多布林值狀態

const [isLoading, setIsLoading] = useState(false)
const [isFinished, setIsFinished] = useState(false)
const [hasError, setHasError] = useState(false)

const fetchSomething = () => {
  setIsLoading(true)

  fetch(url)
    .then(() => {
      setIsLoading(false)
      setIsFinished(true)
    })
    .catch(() => {
      setHasError(true)
    })
}

const [state, setState] = useState('idle')

const fetchSomething = () => {
  setState('loading')

  fetch(url)
    .then(() => {
      setState('finished')
    })
    .catch(() => {
      setState('error')
    })
}

import React, { useEffect, useState } from "react";

import AddModal from "../components/AddModal";
import LoadingIndicator from "../components/LoadingIndicator";
import BrowserItem from "../components/BrowserItem";

import colors from "../config/colors";

function Browsers() {
  const URL = "https://google.com/myData.json";

  const [loading, setLoading] = useState(true);
  const [browsers, setBrowsers] = useState([]);

  const [modalVisible, setModalVisible] = useState(false);
  const [description, setDescription] = useState("");

  const changeDescription = (description) => {
    setDescription(description);
    setModalVisible(!modalVisible);
  };

  const changeOpacity = () => {
    setModalVisible(!modalVisible);
  };

  useEffect(() => {
    fetch(URL)
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.Browsers;
      })
      .then((browsers) => {
        setBrowsers(browsers);
        // console.log(browsers)
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      {loading ? (
        <LoadingIndicator />
      ) : (
        <>
          <AddModal
            modalVisible={modalVisible}
            changeOpacity={() => changeOpacity()}
            description={description}
          />
          <List
            data={browsers}
            keyExtractor={(browser) => browser.fullname}
            renderItem={({ item }) => (
              <BrowserItem
                {...item}
                changeDescription={() => changeDescription(item.description)}
              />
            )}
          />
        </>
      )}
    </>
  );
}

export default Browsers;

import { useEffect, useState } from "react";

function useFetch(url) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(undefined);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((response) => response.json())
      .then(setData)
      .finally(() => setLoading(false))
      .catch((error) => Alert.alert("Fetch error", error));
  }, [url]);

  return {
    loading,
    data,
  };
}

function useBrowsers(url) {
  const { loading, data } = useFetch(url);
  const [selectedBrowser, setSelectedBrowser] = useState(undefined);

  return {
    loading,
    browsers: data?.Browsers,
    selectedBrowser,
    setSelectedBrowser,
  };
}

function UIFriendlyList(props) {
  if (props.loading) {
    return <LoadingIndicator />;
  }

  if (props?.data && props.data.length === 0) {
    return <Text>This list is empty (</Text>;
  }

  return <List {...props} />;
}

// BrowsersList.tsx
function BrowsersList(props) {
  const { loading, selectedBrowser, setSelectedBrowser, browsers } = props;
  return (
    <View style={styles.container}>
      <AddModal
        modalVisible={Boolean(selectedBrowser)}
        onClose={() => setSelectedBrowser(undefined)}
        description={selectedBrowser?.description}
      />
      <UIFriendlyList
        loading={loading}
        data={browsers}
        renderItem={({ item }) => (
          <BrowserItem
            key={item.fullname}
            browser={item}
            onPress={() => setSelectedBrowser(item)}
          />
        )}
      />
    </View>
  );
}

function Browsers() {
  return <BrowsersList {...useBrowsers("https://google.com/myData.json")} />;
}