Блог

Всем привет,

Я создал плагин пользовательского поля, который подключается к API поиска mapbox для получения местоположений при вводе пользователем. Я создал компонент, и, кажется, все работает нормально до той части, где мне нужно отправить объект в API.

Когда я хочу сохранить название местоположения в API, это работает просто отлично

 {
"id": 1,
"companyName": "Stina",
"location": "South Africa",
"published_at": "2021-02-25T22:31:14.550Z",
"created_at": "2021-02-25T22:29:18.335Z",
"updated_at": "2021-02-28T21:55:15.064Z",
}
 

Итак, это код, используемый для получения этого:

  const updateLocationValue = (locationValue) => {
    props.onChange({
      target: { name: "location", value: locationValue.title },
    });
  };
 

Но когда я хочу отправить весь объект целиком, чтобы я мог также получить координаты, я получаю null

 {
"id": 1,
"companyName": "Stina",
"location": null,
"published_at": "2021-02-25T22:31:14.550Z",
"created_at": "2021-02-25T22:29:18.335Z",
"updated_at": "2021-02-28T21:55:15.064Z",
}
 

Это код, который я использую для отправки всего объекта, и он отлично работает в журнале консоли, и я также получаю координаты, но я не могу передать его в Strapi:

  const updateLocationValue = (locationValue) => {
    props.onChange({
      target: { name: "location", value: locationValue },
    });
  };
 

Я ожидаю увидеть объект, как показано ниже, чтобы я мог получить название и координаты:

 {
"id": 1,
"companyName": "Stina",
"location": {object},
"published_at": "2021-02-25T22:31:14.550Z",
"created_at": "2021-02-25T22:29:18.335Z",
"updated_at": "2021-02-28T21:55:15.064Z",
}
 

Я зарегистрировал поле в company.settings.json так же, как вы можете видеть ниже:

 {
  "kind": "collectionType",
  "collectionName": "companies",
  "info": {
    "name": "Company",
    "description": ""
  },
  "options": {
    "increments": true,
    "timestamps": true,
    "draftAndPublish": true
  },
  "attributes": {
    "companyName": {
      "type": "string"
    },
    "location": {
      "type": "locationsearch",
      "columnType": "longtext"
    },
    "products": {
      "collection": "product",
      "via": "company"
    }
  }
}
 

Итак, тип столбца — longtext, я попытался изменить его на «object» или «JSON», но он по-прежнему показывает мне null

Вот полный код компонента, который работает просто отлично:

 import { Label, InputText } from "@buffetjs/core";

const apiToken =
  "****************************************";

export default function Location(props) {
  const [locationTitle, setLocationTitle] = useState("");
  const [suggestions, setSuggestions] = useState([]);
  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
  const wrapperRef = useRef(null);
  const popperEl = useRef(null);
  const [cursor, setCursor] = useState(null);

  const fetchLocation = (searchText) => {
    searchText amp;amp;
      fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${apiToken}`
      )
        .then((response) => response.json())
        .then((data) => {
          const newSuggestions = data
            ? data.features.map((feature) => ({
                title: feature.place_name,
                centerCoordinates: feature.center,
              }))
            : [];
          setSuggestions(newSuggestions);
        });
  };

  useEffect(() => {
    locationTitle amp;amp; fetchLocation(locationTitle);
  }, [locationTitle]);

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  const updateLocationValue = (locationValue) => {
    props.onChange({
      target: { name: "location", value: locationValue.title },
    });
  };

  const handleClickOutside = (e) => {
    const { current: wrap } = wrapperRef;
    if (wrap amp;amp; !wrap.contains(e.target)) {
      setSuggestionsOpen(false);
    }
  };

  const setLocationValue = (location) => {
    setLocationTitle(location.title);
    updateLocationValue(location);
    setSuggestionsOpen(false);
  };

  return (
    <div ref={wrapperRef}>
      <Label htmlFor="input">Location</Label>
      <InputText
        name="input"
        onChange={(e) => setLocationTitle(e.target.value)}
        placeholder="Riva 16, 21420, Bol, Croatia"
        type="search"
        value={locationTitle}
        onClick={() => setSuggestionsOpen(true)}
      />
      <div ref={popperEl} className="options-wrapper">
        {suggestionsOpen amp;amp; (
          <div>
            {suggestions.map((suggestion) => {
              return (
                <div
                  onClick={() => setLocationValue(suggestion)}
                  key={suggestion.id}
                >
                  {suggestion.title}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}
 

Может ли кто-нибудь порекомендовать какие-либо шаги для завершения этой работы?

Большое спасибо!