Javascript 正在传递输入值以获取不工作的数据

我正在从后端获取csv。如果我输入我的

${baseURL}example.com

，我可以获取数据。但是

${baseURL}{searchInput}

不起作用。有500个错误。输入作为

{searchInput}

传递

const[csv，getcsv]=useState（[]）；
const[searchInput，setSearchInput]=useState（“”）；
const fetchIt=useCallback（（）=>{
常量baseURL=`http://localhost:3000/downloadIt?data=`;
axios
.get（`${baseURL}${searchInput}`）
。然后（（响应）=>{
getcsv（response.data）；
})
.catch（（错误）=>{
console.log（错误）；
});
}, []);
常量handleChange=（事件）=>{
setSearchInput（事件、目标、值）；
};
useffect（（）=>{
fetchIt（）；
}，[fetchIt]）；
返回(
{csv}
{searchInput}
);尝试控制台的输出

${baseURL}{searchInput}

我猜uri段中可能存在斜杠问题。如果没有，这是向解决方案迈出的一步。
这里有几个问题：

（主要）您的
useffect
hook立即运行
fetchIt（）
，而不是等待
searchInput
设置值。因此，您使用查询字符串
？data=
调用
fetchIt
，如果您的后端代码不能很好地处理这个问题，您将得到500分
（主要）由于您的
useffect
钩子在其依赖项数组中没有
searchInput
，因此它不会在
searchInput
更改时重新运行。添加
searchInput
作为该钩子的依赖项
（中等）将
输入设置为
searchInput

（小调）
是一个自动关闭标签
试试这个：

const [csv, getcsv] = useState([]);
const [searchInput, setSearchInput] = useState('');

const fetchIt = useCallback(() => {
  const baseURL = 'http://localhost:3000/downloadIt?data=';
  axios
    .get(`${baseURL}${searchInput}`)
    .then((response) => {
      getcsv(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

const handleChange = (event) => {
  setSearchInput(event.target.value);
};

useEffect(() => {
  if (searchInput) {
    fetchIt();
  }
}, [fetchIt, searchInput]);

return (
  <div>
    <input onChange={handleChange} value={searchInput} />
    <a href={csv}>Download CSV</a>
    <code><pre>{csv}</pre></code>
  </div>
);

const[csv，getcsv]=useState（[]）；
常量[searchInput，setSearchInput]=useState（“”）；
const fetchIt=useCallback（（）=>{
常量baseURL=http://localhost:3000/downloadIt?data=';
axios
.get（`${baseURL}${searchInput}`）
。然后（（响应）=>{
getcsv（response.data）；
})
.catch（（错误）=>{
console.log（错误）；
});
}, []);
常量handleChange=（事件）=>{
setSearchInput（事件、目标、值）；
};
useffect（（）=>{
如果（搜索输入）{
fetchIt（）；
}
}，[fetchIt，searchInput]）；
返回(
{csv}
);
searchInput
应进行编码服务器上出现了什么错误？您是否查看了http请求，url是否正确？是的url是正确的