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

Posted

技术标签:

【中文标题】访问从 Reactjs 中的状态创建的数组的数据时出现问题【英文标题】:Problem accessing data of an array created from the state in Reactjs 【发布时间】:2022-01-08 05:40:59 【问题描述】:

我有一系列国家/地区代码,我需要知道名称。 我正在尝试从州(axios 调用)访问国家数据,并从那里按国家代码过滤,然后从该新数组中提取国家的通用名称。 (我正在使用 restcountries.com api)。

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

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;

【问题讨论】:

【参考方案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 中的状态创建的数组的数据时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

在reactjs中删除重复项后如何从状态值和setstate创建数组

从存储在 React 状态中的对象数组访问属性

通过 ReactJS 访问 JSON 中的数组

当状态数组中的任何值被修改时,ReactJS 组件状态不会更新

单击事件后如何从 ReactJS 中的数组中删除对象

如何在状态更改(父)reactjs时重新渲染子组件