Javascript 从后端访问数据时抛出错误，表示数据未定义

我正在从后端服务器获取一些信息，我正在react应用程序上成功呈现这些信息，但我需要计算和获取一些值

我得到了一个状态

{games.prices.price}

，它实际上不起作用，但没有错误，但是如果我尝试类似于

{game.prices[0].price}

的操作，我会得到一个错误或

{game.prices[0]}

，表示价格未定义

我怎样才能从那个json中得到最低的价格呢

这就是json响应的样子：

[
    {
        "id": 1,
        "panelgameid": 71,
        "name": "Counter-Strike 1.6",
        "active": 1,
        "minslots": 12,
        "maxslots": 32,
        "slotincreament": 2,
        "order": 1,
        "prices": [
            {
                "id": 1,
                "gameid": 1,
                "location": "USA",
                "price": 0.6
            },
            {
                "id": 2,
                "gameid": 1,
                "location": "Germany",
                "price": 0.4
            }
        ]
    }
]

这是我的代码：

class GameSlider extends Component {
  state = {
    games: [],
  };

  componentDidMount() {
    axios.get("http://localhost:8000/api/games").then(res => {
      this.setState({
        games: res.data,
      });
    });
  }

  render() {
    const { games } = this.state;
    const gamesList = games.length ? (
      games.map(games => (
        <div>
          <div className="home-games">
            <div
              src=""
              className="img"
              style={{
                backgroundImage: `url(https://upload.wikimedia.org/wikipedia/sr/c/ce/Counter-Strike_Global_Offensive.jpg)`,
              }}
              alt="..."
            />
            <div className="price">
              Slot price
              <p>{games.prices.price}</p>
            </div>
            <span className="title">{games.name}</span>
            <div className="features">
              <Col span={24} className="feature">
                <Icon type="lock" /> Up to {games.maxslots} slots
              </Col>
            </div>

            <Button
              className="comet-buy-button"
              style={{ background: "rgb(241,89,89)", borderRadius: "20px" }}
            >
              BUY NOW!
            </Button>
          </div>
        </div>
      ))
    ) : (
      <div>
        <h1>Nothing to show</h1>
      </div>
    );

    return (
      <div className="home-page-slider">
        <Slider {...settings} arrows={false}>
          {gamesList}
        </Slider>
      </div>
    );
  }
}

类GameSloider扩展组件{
状态={
游戏：[]，
};
componentDidMount（）{
axios.get（“http://localhost:8000/api/games）然后（res=>{
这是我的国家({
游戏：res.data，
});
});
}
render（）{
const{games}=this.state；
const gamesList=games.length(
games.map（games=>(
老虎机价格
{游戏。价格。价格}

{games.name}
最多{games.maxslots}个插槽
现在就买！
))
) : (
没什么可展示的
);
返回(
{gamesList}
);
}
}

所以我成功地得到了除了价格以外的所有信息，我需要在这个例子中得到德国的价格，因为它的价格更低

---

我删除了slider的设置，因为它工作正常。

我猜错误是由于键入了

游戏而不是
游戏造成的<代码>{games.prices[0].price}
应该有效。但是，为了获得最低的价格，需要对数组进行排序。根据阿里·拉扎的回答，如下所示：

Math.min（games.prices.map（el=>el.price））

这可能就是您要查找的内容。
您可以使用Math.min和spread运算符进行迭代，然后映射

 let pricesState = Math.min(...state.prices.map(el => el.price));   

我想您需要首先解决该响应：
axios.get（'http://localhost:8000/api/games）。然后（res=>{res.json（）。然后（result=>{this.setState（{games:result.data}）}）
@messervill axios已经处理好了。“我收到一个错误”怎么了？它正在工作！谢谢，所以我必须在render（）之后或之前添加此内容？因为当我尝试此方法并更改{pricesState}
时，它不起作用。您可以在render方法之后添加此方法，第二个“const{games}=this.state；”应该是this.state.games。