Блог

Главная - Вопросы по программированию - React

React

#javascript #reactjs

Вопрос:

Работал над своим небольшим проектом и столкнулся с проблемой. Я использую API «ASOS», и мне нужно динамически добавлять ключ и значение к параметрам, необходимым для поиска правильного продукта. Это означает, например, выбор цвета, размера, ценового диапазона и т.д. Проблема в том, что все, что я пробовал, не увенчалось успехом.

Как динамически добавлять ключ и значение к объекту?

Что-то вроде этого:

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

Спасибо!

Имейте в виду facetKey и facetValue возвращаемые строковые значения, и если пользователь не выбрал «фасет» или опцию фильтрации продуктов. Затем он возвращается undefined , может, конечно, изменить это значение на null.

Ответ №1:

Вы можете использовать [] оператор с объектами.

В общем:

 let obj = {};
let key = 'x';
let value = 3;

obj[key] = value;
console.log(obj);
console.log(obj[key]);

В вашем примере:

 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;

Комментарии:

1. Ах, хорошо, я понимаю. Да, это работает! Теперь ему просто нужно обновить продукты, будет ли добавление params [] в useEffect работать или будет проще с перезагрузкой страницы?

2. Я думаю, вы спрашиваете, как обновить params его до того, как он будет использован useEffect() ? Если это так, ваш фрагмент не отображается facetKey и facetValue изменяется, но если предположить, что он изменен в вашем полном коде, то да, вы можете просто переместить params[k] = v его внутрь useEffect() .

3. Ах да, я понимаю. Это работает безупречно! Просто нужно, чтобы он мог фильтровать несколько лицевых ключей и значений. Я знаю, что мне нужно использовать ... до сих пор, но где это будет, я не знаю! ха-ха, спасибо за помощь!

Ответ №2:

Вы можете написать код следующим образом.

 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 amp;amp; params = { ...params, [facetKey]: facetValue }
// or
if (facetKey) {
    params = { ...params, [facetKey]: facetValue }
}
Метки: