小编Peo*_*ray的帖子

我正在使用上下文 API，并且我的上下文文件中有以下内容：

useEffect(() => {
    async function getSingleCountryData() {
      const result = await axios(
        `https://restcountries.eu/rest/v2/alpha/${props.match.alpha3Code.toLowerCase()}`
      );
      console.log(result)
      setCountry(result.data);
    }
    if (props.match) getSingleCountryData();
  }, [props.match]);

在我正在使用的组件中，它不起作用，因为它不知道 props.match.alpha3Code 是什么。我怎样才能传递这个值？alpha3Code来自URL：alpha3Code在localhost:3000/country/asa哪里，我怎样才能得到这个值？asa

基本上，我想做的是。我在主页上列出了一个国家/地区列表。现在我正在尝试获取有关单个国家/地区的更多信息。路线是从 API 获取的/country/:alpha3Code位置。alpha3Code

FWIW，这是我的完整上下文文件：

import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios';

export const CountryContext = createContext();

export default function CountryContextProvider(props) {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState([]);

  useEffect(() => {
    const getCountryData = async () => { …

我正在尝试使用相同的组件来处理我的应用程序的添加和编辑部分。我正在使用 Firebase，所以我正在检查id路由参数中是否有一个，如果有，它呈现为编辑表单，如果没有，呈现为添加表单。但这不起作用，它有一些奇怪的行为。

这是ContactForm组件的代码

<template>
  <div>
    <div class="card mb-3">
      <div class="card-header">{{ editing ? 'Edit' : 'Add' }} Contact</div>
      <div class="card-body">
        <form @submit.prevent="addContact">
          <TextInputGroup
            label="Name"
            name="name"
            placeholder="Enter your name..."
            v-model="contact.name"
            for="name"
          />
          <TextInputGroup
            type="email"
            label="Email"
            name="email"
            placeholder="Enter your email..."
            v-model="contact.email"
          />
          <TextInputGroup
            type="phone"
            label="Phone"
            name="phone"
            placeholder="Enter your phone number..."
            v-model="contact.phone"
          />

          <input type="submit" value="Add Contact" class="btn btn-block btn-light" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import TextInputGroup from "../layout/TextInputGroup";
import { db } from "../../firebase";

export default { …