React渲染setpickupcoord时报函数不能作为合法React子元素错误

问题原因 #

• 你错误将useState返回的状态修改函数setpickupcoord当作状态值渲染到了JSX中，React不允许把函数作为子元素渲染，因此直接抛出「Functions are not valid as a React child」报错。
• 你声明的pickupcoord才是存储接口返回坐标值的状态变量，应当渲染这个变量而非修改它的set函数。
• 额外问题：useState未设置初始值，首次渲染时pickupcoord为undefined，也会导致渲染异常。

解决方案 #

核心修改点为替换JSX中渲染的变量，补充初始状态和加载兜底逻辑，修正后的代码如下：

// 给状态添加初始值，避免初始渲染undefined问题
const [pickupcoord, setpickupcoord] = useState([0,0]);
const [dropoffcoord, setdropoffcoord] = useState([0,0]);

//Pick Up Section
const GetPickup = () => {
  let pickup = "Skoura Mdaz";
  fetch(
    `https://api.mapbox.com/geocoding/v5/mapbox.places/${pickup}.json?` +
      new URLSearchParams({
        access_token: "pk.eyJ1IjoiZW5naW5uZXJkciIsImEiOiJja3ZtOW55bGEweGNiMnhvdTBzM2oydGt1In0.UrfgWtDHRAvLZSgD8ruhVA",
        limit: 1,
      })
  )
    .then((res) => res.json())
    .then((data) => {
      setpickupcoord(data.features[0].center)
    });
};

useEffect(() => {
  GetPickup();
  GetDroopOf();
},[]);

return (
  <Wrapper>
    <Map />
    <ContainerItems>
      <Headtitile>
        <Header>
          {/* 替换setpickupcoord为pickupcoord，可自行调整坐标展示格式 */}
          <Title>Pickup: {pickupcoord?.join(', ') || '加载中'}</Title>
        </Header>
      </Headtitile>
    </ContainerItems>
  </Wrapper>
);

如果需要单独展示经度、纬度，可直接通过pickupcoord[0]、pickupcoord[1]取值展示。

内容的提问来源于stack exchange，提问作者Idriss