开发者问题收集

为什么我无法在 Redux 中的数组中引用对象？

2018-05-11
379
javascript arrays reactjs object 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);

我做错了什么？

2个回答

以下是解决方法。在我的组件中，在原始 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>
    );
  }
};
Jared Gilpin
2018-05-11

编辑：我可能理解错了。如果我没看错的话，您已经在其他地方填充了您的状态。然后，您正在检查新闻的第一项是否存在，如果没有对特定事物执行 getNews 操作。我想知道如果没有第一项，控制台日志怎么不会触发错误？

如果我是对的，您会看到此问题，因为您的 if 块中没有返回任何内容： 

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

尝试这样做： 

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

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

也许最好使用类组件并在 componentDidMount 中执行此数据提取。

devserkan
2018-05-11