Javascript 反应&；Axios-动态向对象添加键和值

在做我的一个小项目时遇到了一个问题。 我使用的是“ASOS”API，我需要动态地向参数添加键和值，以便找到正确的产品。这是挑选例如颜色、尺寸、价格范围等。问题是，我尝试过的所有事情都没有成功

如何向对象动态添加键和值

大概是这样的：

currency: "USD",
sizeSchema: "US",
lang: "en-US",
newKey: newValue

这是我的密码：

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

constfetchapi=（props）=>{
const[product，setProducts]=useState（[]）；
//关键与价值
让facetKey=props.facetKey；
让facetValue=props.facetValue；
//设置参数
设params={
商店：“美国”，
偏置：道具偏置，
categoryId:props.categoryId，
极限：道具极限，
国家：“美国”，
排序：“新鲜度”，
货币：“美元”，
sizeSchema：“美国”，
朗：“恩，我们”，
};
//需要将我的“facetKey”和“facetValue”添加到“params”。
useffect（（）=>{
常量选项={
方法：“获取”，
url:“https://asos2.p.rapidapi.com/products/v2/list",
params:params，
标题：{
“x-rapidapi-key”：“，
“x-rapidapi-host”：“，
},
};
axios
.请求（选项）
.然后（功能（响应）{
setProducts（响应、数据、产品）；
道具项目（响应、数据、项目计数）；
方面（响应、数据、方面）；
日志（response.data.facets）；
})
.catch（函数（错误）{
控制台错误（error）；
});
}，[props.offset，props.limit]）；
返回(
{product.map（（产品）=>(
))}
);
};

谢谢

记住

---

facetKey

和

facetValue

返回字符串值，如果用户没有选择“facet”，或者没有选择过滤产品的选项。然后它返回

未定义的

，当然可以将其更改为null。

您可以对对象使用

[]

操作符

一般而言：

让obj={}；
让key='x'；
设值=3；
obj[键]=值；
控制台日志（obj）；
console.log（obj[key]）您可以对对象使用
[]
操作符

一般而言：


让obj={}；
让key='x'；
设值=3；
obj[键]=值；
控制台日志（obj）；
console.log（obj[key]）您可以按如下方式编写代码

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

如果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 }
}

您可以按如下方式编写代码

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

如果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 }
}

啊，好的，我明白了。是的，这很有效！现在它只需要刷新产品，将
params
添加到useffect中的
[]
会起作用吗？还是重新加载页面会更简单？我想你是在问如何在
useffect（）中使用
params
之前更新它？如果是这样，您的代码片段不会显示正在更改的
facetKey
和
facetValue
，但假设在完整代码中更改了，那么您可以将
params[k]=v
移动到
useffect（）
内部。啊，是的，我明白了。这工作完美无瑕！只需要它能够过滤多个facey键和值。我知道到目前为止我需要使用
…
，但是我不知道它应该在哪里！哈哈，谢谢你的帮助！啊，好的，我明白了。是的，这很有效！现在它只需要刷新产品，将
params
添加到useffect中的
[]
会起作用吗？还是重新加载页面会更简单？我想你是在问如何在
useffect（）中使用
params
之前更新它？如果是这样，您的代码片段不会显示正在更改的
facetKey
和
facetValue
，但假设在完整代码中更改了，那么您可以将
params[k]=v
移动到
useffect（）
内部。啊，是的，我明白了。这工作完美无瑕！只需要它能够过滤多个facey键和值。我知道到目前为止我需要使用
…
，但是我不知道它应该在哪里！哈哈，谢谢你的帮助！