[英]React & Axios - Dynamically add key and value to object
Working on a little project of mine and ran into an issue.在我的一个小项目上工作并遇到了一个问题。 I am using the "ASOS" API and I need to dynamically add key and value to the parameters that it needs to find the correct product.
我正在使用“ASOS”API,我需要动态地将键和值添加到它需要找到正确产品的参数中。 It is to pick for example color, size, price range etc. Issue is, all things I've tried haven't ended up in a success.
例如选择颜色、尺寸、价格范围等。问题是,我尝试过的所有事情都没有成功。
How do I dynamically add key and value to an object?如何动态地将键和值添加到 object?
Something like this:像这样的东西:
currency: "USD",
sizeSchema: "US",
lang: "en-US",
newKey: newValue
Here is my code:这是我的代码:
const FetchAPI = (props) => {
const [product, setProducts] = useState([]);
// Key and Value
let facetKey = props.facetKey;
let facetValue = props.facetValue;
// Sets the paramaters
let params = {
store: "US",
offset: props.offset,
categoryId: props.categoryId,
limit: props.limit,
country: "US",
sort: "freshness",
currency: "USD",
sizeSchema: "US",
lang: "en-US",
};
// Need to add my "facetKey" and "facetValue" to "params".
useEffect(() => {
const options = {
method: "GET",
url: "https://asos2.p.rapidapi.com/products/v2/list",
params: params,
headers: {
"x-rapidapi-key": "",
"x-rapidapi-host": "",
},
};
axios
.request(options)
.then(function (response) {
setProducts(response.data.products);
props.items(response.data.itemCount);
props.facets(response.data.facets);
console.log(response.data.facets);
})
.catch(function (error) {
console.error(error);
});
}, [props.offset, props.limit]);
return (
<div>
<div className={classes.container}>
{product.map((product) => (
<ProductCard
key={product.id}
img={product.imageUrl}
name={product.name}
price={product.price.current.text}
/>
))}
</div>
</div>
);
};
Thanks!谢谢!
Keep in mind The facetKey
and facetValue
return string values, and if the user havent picked a "facet", or an option to filter the products.记住
facetKey
和facetValue
返回字符串值,如果用户没有选择“facet”,或者过滤产品的选项。 Then it returns undefined
, can of course change this to null.然后返回
undefined
,当然可以把这个改成 null。
You can use the []
operator with objects.您可以将
[]
运算符用于对象。
In general:一般来说:
let obj = {}; let key = 'x'; let value = 3; obj[key] = value; console.log(obj); console.log(obj[key]);
In your example:在您的示例中:
let facetKey = props.facetKey;
let facetValue = props.facetValue;
// Sets the paramaters
let params = {
// ...
};
// Need to add my "facetKey" and "facetValue" to "params".
if (facetKey)
params[facetKey] = facetValue;
You can write the code as follows.您可以编写如下代码。
let params = {
store: "US",
offset: props.offset,
categoryId: props.categoryId,
limit: props.limit,
country: "US",
sort: "freshness",
currency: "USD",
sizeSchema: "US",
lang: "en-US",
[facetKey]: facetValue
};
And if facetKey can be undefined, you can do like this.如果 facetKey 可以未定义,您可以这样做。
let params = {
store: "US",
offset: props.offset,
categoryId: props.categoryId,
limit: props.limit,
country: "US",
sort: "freshness",
currency: "USD",
sizeSchema: "US",
lang: "en-US",
};
facetKey && params = { ...params, [facetKey]: facetValue }
// or
if (facetKey) {
params = { ...params, [facetKey]: facetValue }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.