Как использовать «useParams ()» внутри API-интерфейса ax ios Call?

Question

Доброе утро,

Я пытаюсь сделать вызов API, используя ax ios, но с переменной внутри строки url.

function MarqueDetails() {
let { marqueName } = useParams();
console.log({marqueName})
const [marqueDetails,setMarqueDetails] = useState([]);
useEffect(()=>{
axios.get(`http://localhost:5000/brand/` + {marqueName})
    .then(response => {
        setMarqueDetails(response.data)
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    })

}, []);

Проблема в том, что переменная возвращает очень странная строка объекта, когда я делаю вызов с переменной {marqueName}

Я знаю, что проблема связана с переменной {marqueName} что я вытягиваю из запроса используя useParams из react-router-dom но я не знаю как это исправить.

Заранее спасибо!

PS: API URL на картинке не работает, я только заметил это и исправил, но у меня все еще есть проблема с [object20%Object]

Answer 1

Неверный синтаксис вашего шаблона. При ссылке на переменную в шаблоне необходимо использовать знак доллара.

axios.get(`http://localhost:5000/brand/${marqueName}`)
    .then(response => {
        setMarqueDetails(response.data)
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    })

}, []);

Answer 2

'http://localhost:5000/brand/' + {marqueName}

Если мы попытаемся разложить это выражение, мы получим «добавить строку в объект», поскольку переменная marqueName находится в скобках.

вместо этого вы хотите

'http://localhost:5000/brand/' + marqueName