在反应中映射json数据时遇到问题

Question

嘿伙计们，我不知道为什么我的 setPlaceId 有效，但我的 setPlaceName 无效 当有一些应该打印的数据时，placeName 不打印任何东西有人可以帮忙吗？所以是的，我添加了更多代码，如果您需要更多内容，请发布，提前感谢大家的帮助，我希望我能尽快解决这个问题。

tldr：setPlaceId 粘贴文本，但 setPlaceName 在有应粘贴的信息时不粘贴文本。

顺便说一句，我从代码中删除了一些东西，所以它不会太长，所以不要担心我没有我调用的一些东西

function ConvertPlaces() {
  const [placeName, setPlaceName] = useState("");
  const [placeId, setPlaceId] = useState("");

  useEffect(() => {
    convert();
  }, []);

  const convert = () => {
    fetch(
      `https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/autosuggest/v1.0/UK/GBP/en-GB/?query=${userInput}`,
      {
        method: "GET",
        headers: {
          //deleted api keys
        },
      }
    )
      .then((res) => res.json())
      .then((response) => {
        console.log(response);
        setPlaceName(response.Places.map((airport) => airport.PlaceName));
        setPlaceId(response.Places.map((airport) => airport.PlaceId));
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const handleChange = (event) => {
    setInputField(event.target.value);
    setUserInput(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setSavedInput(inputField);
    setInputField("");
    convert();
  };

  return (
    <div>
      <SearchPlaces
        run={convert}
        handleChange={handleChange}
        handleSubmit={handleSubmit}
        inputField={inputField}
        userInput={userInput}
        savedInput={savedInput}
      />
      <p>sfdajfp</p>
      <p>{placeId}</p>
      <p>{placeName}</p>
    </div>
  );
}

export default ConvertPlaces;

Answer 1

我不确定这是否能解决您的问题，因为您确实应该显示更多代码，但无论如何，我可以建议您只循环一次响应吗？

// ...
fetch([API endpoint])
  .then(res => res.json())
  .then(response => {
    const setPlaceData = response.reduce((outObj, airport) => {
      outObj.PlaceNames.push(airport.PlaceName);
      outObj.PlaceIds.push(airport.PlaceId);
      return outObj;
    }, { PlaceNames: [], PlaceIds: [] });
    
    /*
     * I am assuming that you are using 'useState()' hook and
     * you are willingly replacing whatever content is already
     * present in your state variables rather than adding to it.
     * E.g.
     * setPlaceName([...placeName, ...setPlaceData.PlaceNames]);
     */
    setPlaceName(setPlaceData.PlaceNames);
    setPlaceId(setPlaceData.PlaceIds);
  });
// ...