Javascript 为什么可以'；在Redux中的数组中引用对象？

我正在从API调用一个对象数组，并将它们加载到状态。我从API接收有效负载并能够将整个阵列加载到我的状态。我可以在控制台日志中看到该对象，但当我尝试从键访问特定值时，它只返回未定义的值

  PullStocks: {
quote: [],
price: '',
news: [
  {
    datetime: '2018-05-11T09:10:00-04:00',
    headline: 'Your first trade for Friday, May 11',
    source: 'CNBC',
    url: 'https://api.iextrading.com/1.0/stock/aapl/article/7912789597255843',
    summary: 'No summary available.',
    related: 'AAPL,FB,OSTK,XRX'
  },
  {
    datetime: '2018-05-11T07:38:21-04:00',
    headline: 'FANG Stocks Have Ignited A Rally - Cramer\'s Mad Money (5/10/18)',
    source: 'SeekingAlpha',
    url: 'https://api.iextrading.com/1.0/stock/aapl/article/6776286739960540',
    summary: '         Stocks discussed on the in-depth session of Jim Cramer\'s Mad Money TV Program, Thursday  , May 10.    The market has been seeing negativity and selloff in the recent past. However, the non-believers have been converted to believers now. How did this happen? All it took was great earnings…',
    related: 'AAPL,AMZN,BIIB,BMRN,CELG,F,FB,FCX,GILD,GRPN,GRUB,INT31168144,KSU,NASDAQ01,NLY,NSC,ONL31168,REGN,Computing and Information Technology'
  }}

我可以调用state.Pullstocks.news[0]，它会在控制台日志中返回完整的对象。我已经尝试过state.Pullstocks.news[0].datetime，我认为它会起作用，但事实并非如此

我使用Redux作为状态管理，但即使在返回有效负载时，我也无法引用正确的密钥

这是我的组件的代码

import React from "react";
import { push } from "react-router-redux";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { getNews } from "../../modules/PullStocks";

const News = props => {
  const currentCompany = props.path.split("/");

  if (!props.news[0]) {
    props.getNews(currentCompany[2]);
  }
  return (
    <div className="widget">
      {console.log(props.news[0])}
      {/* <h1>{props.news[0]}</h1>
      {console.log(JSON.stringify(props.news))} */}
    </div>
  );
};

const mapStateToProps = state => ({
  news: state.PullStocks.news,
  path: state.routing.location.pathname
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      getNews
    },
    dispatch
  );

export default connect(mapStateToProps, mapDispatchToProps)(News);

从“React”导入React；
从“react router redux”导入{push}；
从“redux”导入{bindActionCreators}；
从“react redux”导入{connect}；
从“../../modules/PullStocks”导入{getNews}”；
const新闻=道具=>{
const currentCompany=props.path.split（“/”）；
如果（！props.news[0]）{
props.getNews（当前公司[2]）；
}
返回(
{console.log（props.news[0]）}
{/*{props.news[0]}
{console.log（JSON.stringify（props.news））}*/}
);
};
常量mapStateToProps=状态=>({
新闻：state.PullStocks.news，
路径：state.routing.location.pathname
});
const mapDispatchToProps=调度=>
bindActionCreators(
{
获取新闻
},
派遣
);
导出默认连接（mapStateToProps、mapDispatchToProps）（新闻）；

---

我做错了什么

编辑：我可能理解错了。如果我没看错的话，你已经在别的地方居住了。然后，如果没有为特定的事情执行getNews操作，则检查是否存在第一条新闻。我想知道如果没有任何第一项，控制台日志如何不触发错误

---

如果我是对的，您看到了这个问题，因为您的If块中没有返回任何内容：

if (!props.news[0]) {
    props.getNews(currentCompany[2]);
  }

试着这样做：

if (!props.news[0]) {
    return props.getNews(currentCompany[2]);
  }

由于没有返回，代码立即跳转到下一个返回，并且在获取数据之前尝试使用它并引发错误

---

也许最好使用一个类组件，在componentDidMount中获取数据。

下面是如何解决的。在我的组件中的原始if语句中添加了else语句。然后返回占位符数据，直到异步调用返回。谢谢devserkan

  const News = props => {
  const currentCompany = props.path.split("/");

  if (!props.news[0]) {
    props.getIexData(currentCompany[2], "news");
    return <p>no data</p>;
  } else {
    return (
      <div className="widget">
        <h1>News</h1>
        {console.log(props.news[0].datetime)}
        {props.headline}
        {/* <h1>{props.news[0]}</h1>
        {console.log(JSON.stringify(props.news))} */}
      </div>
    );
  }
};

const News=props=>{
const currentCompany=props.path.split（“/”）；
如果（！props.news[0]）{
props.getIexData（当前公司[2]，“新闻”）；
返回无数据
；
}否则{
返回(
新闻
{console.log（props.news[0].datetime）}
{props.headline}
{/*{props.news[0]}
{console.log（JSON.stringify（props.news））}*/}
);
}
};

没有“日期线”。对不起，这是个打字错误。它应该是datetime。如果它处于如图所示的状态，那么您的代码是正确的，因此有其他错误。谢谢。最奇怪的是，我无法从有效载荷中引用它。我试图直接在设置状态的地方创建一个变量，但它不起作用。奇怪的是，我有另一个端点，具有类似的结构，工作得非常好。你得到了什么错误？谢谢。我认为你说得对。现在我得到一个错误：对象作为React子对象无效（找到：[object Promise]）。如果要呈现子对象集合，请改用数组。在新闻中（由Connect（News）创建）在Connect（News）（在index.js:33）在div中（在index.js:29）在组件中（由Route创建）在Route中（在index.js:25）这是否意味着我需要将对象数组转换为数组数组？我编辑了我的答案，因为我认为我误解了这个错误。但返回部分在某种程度上是正确的，因为您的代码在没有返回部分的情况下继续运行。当然，您不应该返回该操作，因为它的目的是获取数据并看到错误，这是一种承诺。同样，您可以将逻辑更改为类组件，从中获取数据并填充状态。但是，我无法清楚地看到您在开始时是如何填充主状态的。在哪里以及如何使用？store是我使用的一个样板，它结合了所有中间件等。所有操作都在pullstocks文件中，并且操作更新状态。getNews调度一个操作，然后用异步调用返回的数据更新状态。那么，为什么要在这里再次使用任何操作来获取数据呢？你不能直接在这里使用新闻状态吗？例如，在哪种情况下，您的新闻状态为空？它是否在其他地方填充，或者您的逻辑是“如果我的新闻组件中没有新闻状态，那么让我们获取数据”，然后您可以在componetDidMount中执行此操作，然后填充状态，检查此处是否有新闻[0]，如果没有呈现微调器或其他内容，如果有，则呈现这些新闻。