自定义 Strapi 字段显示为空

Question

大家好，

我创建了一个自定义字段插件，它连接到 mapbox 搜索 API 以在用户键入时获取位置。 我已经创建了组件，一切似乎都运行良好，直到我需要将对象发送到 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 },
    });
  };

但是当我想发送整个对象以便我也可以获得坐标时，我会得到空

{
"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"
    }
  }
}

所以 columnType 是长文本，我尝试将其更改为“object”或“JSON”，但它仍然显示为空

这是工作正常的组件的完整代码：

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 &&
      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 && 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 && !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 && (
          <div>
            {suggestions.map((suggestion) => {
              return (
                <div
                  onClick={() => setLocationValue(suggestion)}
                  key={suggestion.id}
                >
                  {suggestion.title}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

有人可以推荐任何步骤来完成这个吗？

非常感谢！