访问从 Reactjs 中的状态创建的数组的数据时出现问题

Question

我有一组国家代码，我需要知道名称。我正在尝试从州（axios 调用）访问国家数据，并从那里按国家代码过滤，然后从那个新数组中提取国家的通用名称。（我用的是 restcountries.com api）。

-如果我创建一个新的映射状态，我会得到太多的重新渲染。 -现在，虽然边界国家信息在那里，但我无法访问它，我收到“无法读取未定义的属性”错误，这通常与生命周期问题有关，因此，我使用了何时访问信息的条件。我仍然无法让它稳定和 return 我需要的名字。有人可以看看并告诉我我做错了什么吗？提前致谢

import axios from "axios";

const BorderCountries = (props) => {
  const [countriesList, setCountriesList] = useState([]);

  useEffect(() => {
    axios
      .get(`https://restcountries.com/v3.1/all`)
      .then((countries) => setCountriesList(countries.data))
      .catch((error) => console.log(`${error}`));
  }, []);

  const getCountryName = () => {
    const codes = props.data;

    const borderCountries = [];
    codes.map((code) => {
      const borderCountry = countriesList.filter((country) =>
        country.cca3.includes(code)
      );
      borderCountries.push(borderCountry);
    });
    // console.log(borderCountries);

    if (props.data.length === borderCountries.length) {
      const borderName = borderCountries.map((border) =>
        console.log(border[0].name.common)
      );
      return borderName
    }
  };

  return (
    <div>
      <h3>Border Countries:</h3>
      {getCountryName()}
    </div>
  );
};

export default BorderCountries;

Answer 1

const getCountryName = () => {
    const codes = props.data;

    if(countriesList.length === 0) return <></>;

    const borderCountries = [];
    codes.map((code) => {
      const borderCountry = countriesList.filter((country) =>
        country.cca3.includes(code)
      );
      borderCountries.push(borderCountry);
    });
    // console.log(borderCountries);

    if (props.data.length === borderCountries.length) {
      const borderName = borderCountries.map((border) =>
        console.log(border[0].name.common)
      );
      return borderName
    }
  };

试试这个，你忘了等待通话结束。

访问从 Reactjs 中的状态创建的数组的数据时出现问题

Problem accessing data of an array created from the state in Reactjs

arrays

async-await

reactjs

axios

react-lifecycle