从Functional React Component中的JSON Response获取一个特定值，并将其设置为Select选项

编程问答 2022-06-11

问题描述

我对React很陌生，我有一个选择框，我想用来自API的数据填充它。 API请求传递该特定用户的ID，然后API将相应的地址返回给该用户。稍后我需要动态设置ID，但这不是我当前面临的问题。 JSON响应很好，可以通过JSON对象进行解析并将所有键值对记录到控制台，这是可管理的。但是，在尝试将一个特定的键值对（包含用户地址的一对）设置为“选择”框中的“选项”时，我遇到了麻烦。我编写的函数会映射所有数据并仅返回一个特定的键值对，但它会不断遍历JSON对象，因此冻结了整个应用程序； 返回的地址应在“选择框”中设置为默认选项，该变量称为“ formattedaddress”。

肯定有更好的方法，但是我不知道如何做，因此，非常感谢任何提示或帮助，谢谢！！

代码如下：

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));;

解决方法

第一件事，我看不到useEffect的依赖项数组？？？您在其中调用setAddress，usersWithName的地方-您所获得的行为的主要嫌疑人。

第二件事，我建议在自定义钩子中导出请求方法，而不是在组件中使用的useEffect，例如像const {data，loading，error} = useRequest（）之类的东西。这样可以使您的组件免于乱码，并且挂钩可以重复使用。

第三，我相信您想要做的就是使用此方法usersWithName更改响应对象，我将再次将其实现为单独的帮助器函数，并在挂钩（如果不可重用）中调用它，或者仅在您想要的时候调用它访问变异值。或者，您可以使用useMemo来存储映射数组，并在每次响应更改时重新计算值。

跟进：

hooks.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,error } = useRequest({requestUrl: 'someUrl'})

尝试改进此挂钩并找出第三部分！

componentscomponentsjavascriptjsonreactjsreactjsresponse