React中输入内容被解析为'object'而非输入文本的问题求助

• 现象：React项目中输入框内容被解析成单词'object'，调用Spotify相关API搜索时，请求参数q的值始终为'object'，而非实际输入的搜索内容。
• 截图：
  
  
• 相关代码：

import { useState } from "react";

function () {
  const [endpoint, setEndpoint] = useState("");

  function searchChange(e) {
    setEndpoint(e.target.value);
    console.log(endpoint);

    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "baef7285e6msh0aae02b3fd1dde5p1d01aajsne4c06de3d63f",
        "X-RapidAPI-Host": "spotify81.p.rapidapi.com",
      },
    };

    fetch(
      "https://spotify81.p.rapidapi.com/search?q=" +
        {endpoint} +
        "&type=albums&offset=0&limit=10&numberOfTopResults=5",
      options
    )
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
  }
  return (
    <input
      className="input"
      value={endpoint}
      placeholder=" 🔍 Search"
      onChange={searchChange}
    />
  );
}

问题原因 #

1. URL拼接错误：{endpoint}是对象字面量，JavaScript将其转换为字符串时会得到[object Object]，最终参数只显示'object'。
2. 状态异步更新问题：setEndpoint是异步操作，console.log(endpoint)会拿到更新前的旧值，直接用状态值发起请求可能获取不到最新输入内容。

修复方案 #

直接使用输入框的实时值拼接URL，并对关键词进行URL编码，同时补全组件名称（符合React规范）：

import { useState } from "react";

// 补全组件名称
function SpotifySearch() {
  const [endpoint, setEndpoint] = useState("");

  function searchChange(e) {
    const inputValue = e.target.value;
    setEndpoint(inputValue);

    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "baef7285e6msh0aae02b3fd1dde5p1d01aajsne4c06de3d63f",
        "X-RapidAPI-Host": "spotify81.p.rapidapi.com",
      },
    };

    // 用实时输入值拼接，并用encodeURIComponent处理特殊字符
    fetch(
      `https://spotify81.p.rapidapi.com/search?q=${encodeURIComponent(inputValue)}&type=albums&offset=0&limit=10&numberOfTopResults=5`,
      options
    )
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
  }
  return (
    <input
      className="input"
      value={endpoint}
      placeholder=" 🔍 Search"
      onChange={searchChange}
    />
  );
}

关键修改点 #

• 用e.target.value直接获取实时输入内容，避免状态异步更新的延迟问题
• 用encodeURIComponent()对搜索关键词编码，防止空格、特殊字符破坏URL结构
• 补全组件名称，符合React组件的定义规范

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