Question

早上好

我正在尝试使用axios进行API调用，但字符串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有所关系，但我不知道如何解决

提前谢谢！

P.S：图片中的API网址无法正常工作，我刚刚注意到并修复了它，但是[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

<template>
  <v-app>
    <ValidationObserver ref="form" v-slot="{ invalid, validated, passes, validate }">
      <form>
        <ValidationProvider rules="required|min:6" v-slot="{ errors, valid }">
          <v-text-field
            v-model="current_password"
            label="Current Password"
            type="password"
            :success="valid"
            :error-messages="errors"
          />
        </ValidationProvider>
        <ValidationProvider rules="required" v-slot="{ errors, valid }">
          <v-text-field
            v-model="new_password"
            label="New Password"
            type="password"
            :success="valid"
            :error-messages="errors"
          />
        </ValidationProvider>
      </form>
    </ValidationObserver>
  </v-app>
</template>

<script>
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
  data() {
    return {
      current_password: "",
      new_password: "",
    };
  },
  components: {
    ValidationObserver,
    ValidationProvider
  },
};
</script>

如果我们尝试分解此表达式，则会得到“向对象添加字符串”，因为'http://localhost:5000/brand/' + {marqueName}变量位于方括号内。

您想要的是

marqueName

如何在axios API调用中使用'useParams（）'？

2 个答案: