从Functional React组件中的JSON响应中获取一个特定值，并将其设置为Select选项
我对React非常陌生，我有一个选择框，我想用API中的数据填充它。API请求传递该特定用户的ID，API将相应的地址返回给该用户。我需要稍后动态设置ID，但这不是我目前面临的问题；JSON响应很好，解析JSON对象并将所有键值对记录到控制台是可管理的；但是，在尝试将一个特定的键值对(包含用户地址的键值对)设置为Select Box中的选项时，我遇到了麻烦。我编写的函数映射所有数据并只返回一个特定的键值对，但它不断迭代JSON对象，因此冻结了整个应用程序；返回的地址应设置为选择框中的默认选项，该变量称为“object”。
当然有更好的方法可以做到这一点，但我不知道怎么做，所以任何提示或帮助都会非常感谢，提前谢谢！
代码如下：
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));;回答 1
Stack Overflow用户
发布于 2020-09-28 11:48:57
首先，我没有看到useEffect的依赖数组？在这里你调用setAddress，usersWithName -你得到的行为的主要嫌疑人。
其次，我建议将请求方法导出到自定义钩子中，而不是可以在组件中使用的错误，例如const {data，loading，useEffect }= 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, loading, error } = useRequest({requestUrl: 'someUrl'})试着改进这个钩子，然后完成第三部分！
https://stackoverflow.com/questions/64100896
复制
相似问题
如何将HoC与React Native一起使用
将TypeScript与React HOC、React.lazy和forwarRef一起使用
将Apollo GraphQL HOC模式与现有的HOC一起使用
将redux与不带connect HOC的react-hooks一起使用
使用HOC的React路由器渲染方法
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
