javascript - 如何渲染链接组件

Question

我有这个 APP 组件。在代码的底部，有一个指向 CountryDetail 组件的链接。问题是单击链接时出现错误。

function App() {
  const [input, setInput] = useState("");
  const [countries, setCountries] = useState([]);
  const [search, setSearch] = useState([]);
  const [status, setStatus] = useState("All");
  const [filteredCountries, setFilteredCountries] = useState([]);



   function onFilter(name) {
    let country = countries.filter((c) => c.name);
    if (countries.length > 0) {
      return country[0];
    } else {
      return null;
    }
  }  

  return (
    <div className="App">
      <header className="App-header"></header>
      <Router>
        <Route path="/" component={Navbar} />

        <Form
          onSearch={onSearch}
          setInput={setInput}
          setSearch={setSearch}
          input={input}
          setStatus={setStatus}
        />

        <AllCountries
          countries={countries}
          search={search}
          filteredCountries={filteredCountries}
        />
        <Route
          exact
          path="/country/:name"
          render={({ match }) => (
            <CountryDetail props={onFilter(match.params.name)} />
          )}
        />
      </Router>
    </div>
  );
}

export default App;


Here is the CountryDetail component:

function CountryDetail({ props }) {
  console.log(props);
  return (
    <div className="details">
      <div className="info">
        <img src={props.flag} className="flags"></img>
        <ul>Name:{props.name}</ul>
        <ul>Native Name: {props.nativeName}</ul>
        <ul>Population:{props.population}</ul>
        <ul>Region:{props.region}</ul>
        <ul>Sub-Region:{props.subregion}</ul>
        <ul>Capital:{props.capital}</ul>
        <ul>Top Level Domain:{props.topLevelDomain}</ul>
        <ul>Currencies:{props.currencies}</ul>
        <ul>Language:{props.language}</ul>
      </div>
    </div>
  );
}

export default CountryDetail;

我做错了什么？CountryDetailed 组件对我来说似乎没问题。另一方面，这是控制台错误：

如果我单独记录道具，它会返回对象，但是当我想渲染该对象的一些道具时，它会失败......

对这个话题有什么建议吗？

标签： javascriptreactjs