Javascript 反应-列表中对象的第二层未定义

我是React的新手，我决定做半个人项目，这意味着我从教程中选了一些项目，给自己一些小任务来模拟工作中的任务。 我在我的代码中遇到了多个错误，我不确定如何解决它们。如果您能给我一些关于如何正确使用谷歌的提示，我将不胜感激

我目前面临的问题有：

在App.js第76,77行中，它说响应中的对象是未定义的，但当我到达一个国家时，我是这样获取的。 在components/ConstantWeather->constant weather中css不工作？但是所有东西都正确导入了，我需要对webpack做些什么才能工作吗？它会不会把index.css中的其他css代码弄乱

在控制台中，即使我在第74行中传递给组件unique keycityId，我也会得到unique key错误

也许这不是发布问题的方式，如果我违反了任何规则，请让我知道

为了不从嵌套对象的API响应中获取未定义的错误，应该添加空检查。您需要检查el.sys是否已定义

尝试在CSS中使用普通类。只需导入CSS文件并使用字符串作为类名

必须将键设置为from map函数后面的元素。在这种情况下，它应该是

为了不从嵌套对象的API响应中获取未定义的错误，应该添加空检查。您需要检查el.sys是否已定义

尝试在CSS中使用普通类。只需导入CSS文件并使用字符串作为类名

必须将键设置为from map函数后面的元素。在这种情况下，它应该是

---

要解决第一个问题，您需要等待api成功检索数据，然后只有您才能映射数据。所以，您可以做的是将weatherConst的初始状态设置为空数组，如下所示

const [weatherConst, setWeatherConst] = useState([]);

然后，在映射数据时，可以检查所获取数据的长度。检查时，您应该执行布尔运算，而不仅仅是长度检查

记住，这只是一个例子，做同样的事情有多种方法

对于CSS问题，您需要为div分配一个适当的类，即className=Card

对于第三个问题，您需要将密钥分配给ConstantWeather组件，如上面的代码所示

---

要解决第一个问题，您需要等待api成功检索数据，然后只有您才能映射数据。所以，您可以做的是将weatherConst的初始状态设置为空数组，如下所示

const [weatherConst, setWeatherConst] = useState([]);

然后，在映射数据时，可以检查所获取数据的长度。检查时，您应该执行布尔运算，而不仅仅是长度检查

记住，这只是一个例子，做同样的事情有多种方法

对于CSS问题，您需要为div分配一个适当的类，即className=Card

对于第三个问题，您需要将密钥分配给ConstantWeather组件，如上面的代码所示

@matej，如果你正在寻找更新，我希望这对你有用。

@matej，如果你正在寻找更新，我希望这对你有用。

---

---

您的问题中需要包含的内容请参见。您的问题中需要包含的内容请参见。您好，谢谢您的回答，关于在何处添加该复选框是否正确的任何提示？您可以直接将此控件添加到道具。el.sys？el.sys.country:''。它可以是这样的您好，谢谢您的回答，关于在哪里添加该检查是正确的任何提示？您可以直接将此控件添加到道具。el.sys？el.sys.country:''。可能是这样的嘿，谢谢你的回答！第一个和第三个问题通过您的示例解决：对于第二个问题，我不太清楚您的意思，您使用的是Material UI？@Alona不，我使用的是纯cssHm。。。关于第二个问题，如果我这样使用它，只是给它命名卡片，那么它可能会干扰其他css？最好的方法是什么？这是你需要的代码{props.cityName}，{props.country}{props.temperature}嘿，谢谢你的回答！第一个和第三个问题通过您的示例解决：对于第二个问题，我不太清楚您的意思，您使用的是Material UI？@Alona不，我使用的是纯cssHm。。。关于第二个问题，如果我这样使用它，只是给它命名卡片，那么它可能会干扰其他css？最好的方法是什么？这是您需要的代码{props.cityName}，{props.country}{props.temperature}@matej-我已经创建了对您的Git存储库的Pull请求，非常感谢！我当然会寻找更新，看看其他开发者是怎么想的！我有新版本，所以我会很快上传@Matej，合并拉取请求，看看你想要什么@Matej，太好了@Matej，如果你解决了你的问题，那么请标出解决了你问题的答案。如果你愿意，我愿意检查你的更新。@matej-

---

我已经创建拉请求到您的Git存储库，非常感谢！我当然会寻找更新，看看其他开发者是怎么想的！我有新版本，所以我会很快上传@Matej，合并拉取请求，看看你想要什么@Matej，太好了@Matej，如果你解决了你的问题，那么请标出解决了你问题的答案。如果你愿意，我愿意检查你的更新。

  return <ConstantWeather 
              cityId={el.id} <-- it is here
              cityName={el.name} 
              country={el.sys.country} 
              temperature={el.main.temp} 
              />
  })

const [weatherConst, setWeatherConst] = useState([]);

let constantWeatherList = weatherConst.length > 0 && weatherConst.map(el => {
    return <ConstantWeather 
              key={el.id}
              cityId={el.id} 
              cityName={el.name} 
              country={el.sys.country} 
              temperature={el.main.temp} 
              />
  })

const ConstantWeather = props => {
  return (
    <div className="Card" key={props.cityId}>
      <div>
        {props.cityName}, {props.country}
      </div>
      <div>{props.temperature}</div>
      <img alt="" />
    </div>
  );
};

const ConstantWeatherList = props =>
  (props.weatherConst || [])
    .filter(el => el) // Filter null if you getting from API
    .map(el => {
      return (
        <ConstantWeather
          key={el.id}
          cityId={el.id}
          cityName={el.name}
          country={el.sys.country}
          temperature={el.main.temp}
        />
      );
    });

<ConstantWeatherList weatherConst={data} />

// Styles
.Card {
  display: inline-block;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}