從 Functional React Component 中的 JSON Response 中獲取一個特定值並將其設置為 Select 選項

Question

我是 React 的新手，我有一個選擇框，我想用來自 API 的數據填充它。 API 請求傳遞該特定用戶的 ID，API 將相應的地址返回給該用戶。 稍后我需要動態設置 ID，但這不是我目前面臨的問題； JSON 響應很好，可以通過 JSON 對象解析並將所有鍵值對記錄到控制台； 但是，我在嘗試將一個特定的鍵值對（包含用戶地址的鍵值對）設置為選擇框中的選項時遇到了麻煩。 我編寫的函數映射了所有數據並只返回一個特定的鍵值對，但它不斷迭代 JSON 對象，因此凍結了整個應用程序； 返回的地址應設置為選擇框中的默認選項，該變量稱為“格式化地址”。

肯定有更好的方法來做到這一點，但我不知道如何做到這一點，因此非常感謝任何提示或幫助，在此先感謝！

代碼如下：

import React, {Component, useContext, useEffect, useRef, useState} from 'react';
import "./formstyles.css";

//i18n
import {withNamespaces} from 'react-i18next';

//Import Breadcrumb

import { withRouter } from "react-router-dom";
import classnames from "classnames";
import EmployeesList from "../../pages/Employees/employees-list";
import EmployeeIdComponent from "./EmployeeId";

import EmployeeId from "./EmployeeId";


const SelectComponent = (props) => {


    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState('');
    const [data, setData] = React.useState([]);
    const [mappedArr, setMappedArr] = React.useState([]);
    const [formattedaddress, setAddress] = useState([])

// 下面的函數返回需要的數據

    let usersWithName = Object.keys(data).map(function(key) {
        JSON.stringify(data);
        let newArr = Object.keys(data);
        let mappedArr = newArr.map(function (i) {
            return [i, data[i]];
        })
        let formattedaddress = mappedArr[18];
        return formattedaddress
    });

//此效果將整個函數設置為選項值

    useEffect(() => {
        setAddress(

        usersWithName
        );
    });

//下面的效果用用戶的ID獲取數據並返回//整個對象

    useEffect(() => {
        setLoading(true);
        fetch('http://tpservice:8888/api/v1/address/d472faec-4316-4040-a2cb-63cb99b5bed1')
            .then((response) => response.json())
            .then((data) => {
                setLoading(false);
                setData(data);
            })

            .catch((e) => {
                setLoading(false);
                setError('fetch failed');
            });
    }, []);

    if (loading) {
        return <p>loading..</p>;
    }

    if (error !== '') {
        return <p>ERROR: {error}</p>;
    }

    return (
        <React.Fragment>
           <div className="clearfix">
                <div className="float-left">
                    <div className="input-group input-group-sm">
                        <div className="input-group-append">
                            <label className="input-group-text">Adresse</label>
                        </div>
                        <select className="custom-select custom-select-sm">
                            <option value="1">{formattedaddress}</option>
                            <option value="2">Adresse 2</option>
                            <option value="3">Adresse 3</option>
                            <option value="4">Adresse 4</option>
                        </select>
                    </div>
                </div>
            </div>
        </React.Fragment>
    );



}
export default withRouter(withNamespaces()(SelectComponent));;

Answer 1

首先，我沒有看到 useEffect 的依賴數組？？？ 在那里你調用 setAddress, usersWithName - 你得到的行為的主要嫌疑人。

第二件事，我建議在自定義鈎子中導出請求方法，而不是使用可以在組件中使用的 useEffect，例如 const {data, loading, error} = useRequest() 之類的東西。 它使您的組件沒有亂碼，並且鈎子是可重復使用的。

第三，我相信你想要做的是用這個方法 usersWithName 改變響應對象，我會再次將它實現為一個單獨的幫助函數，並在鈎子中調用它（如果不可重用）或者只是當你想訪問變異值。 或者您可以使用 useMemo 來存儲您的映射數組，並在每次響應更改時重新計算值。

跟進：

鈎子.js

const useReqest = ({ requestUrl }) = {
  const [data, setData] = useState();
  const [loading, setLoading] = useState();
  const [error, setError] = useState();

  useEffect(() => {
     fetch(...)
     .then((response) => setData(yourMutationFunction(JSON.parse(response))))
     .catch((e) => setError(e))
  }, [requestUrl])

  return {data, loading, error};
}

您可以在組件中使用它，例如：

// Note this hook is execited everytime requestUrl changes or is initialised
const { data, loading, error } = useRequest({requestUrl: 'someUrl'})

嘗試改進這個鈎子並計算出第三部分！