Javascript 在React（Axios、React、Redux）上发出请求/显示数据时出现奇怪问题

我正在尝试制作一个个人应用程序，但在请求方面遇到了一些问题，与API无关

请求的结果返回以下JSON:

我的代码：

class Home extends Component {
  componentDidMount() {
    this.props.getTrending();
  }
  render() {
    const { trending } = this.props.trending;
    console.log(trending);

    const Card = (props) => (
      <Panel {...props} bordered header='Card title'>
        {trending.results.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}
      </Panel>
    );
    return (
      <div className='Home'>
        <FlexboxGrid justify='center'>
          <Card />
        </FlexboxGrid>
      </div>
    );
  }
}

export default connect(
  (state) => {
    return {
      trending: state.trending,
    };
  },
  { getTrending }
)(Home);

我的减速机：

import { GET_TRENDING } from "../types";

const initialState = {
  trending: [],
  loading: true,
};

export default function trendingReducer(state = initialState, action) {
  switch (action.type) {
    case GET_TRENDING:
      return {
        ...state,
        trending: action.payload,
        loading: false,
      };
    default:
      return state;
  }
}

忽略与UI组件库相关的卡常量等。您可以从代码中看到，我正在记录“趋势分析”的结果。但我得到的是一个空数组，但奇怪的是：

如果我将map函数从“trending.results”映射更改为“trending”，然后刷新，那么控制台将返回一个空数组和另一个正确的数组。如果我将其更改回“trending.results”，然后React自动重新加载页面，页面将返回正确的数组两次，并在应用程序上显示数据，但如果我刷新页面而不更改代码，则会返回显示空数组和错误，错误为“无法读取未定义的属性映射”显然是因为我没有得到正确的数据

以前有人吃过吗？这完全没有意义，如果是这样，那么有人能指导我如何解决这个问题吗？我试图完全关闭React服务器并重新启动它，但这并不能解决问题。我的大脑冻结了（如果需要，我可以录制一段视频）

试试这种方法

export const getTrending = () => async (dispatch) => {
  const res = await axios.get(
    `https://api.themoviedb.org/3/movie/popular?api_key=KEY&language=en-US&page=1`
  );
  dispatch({
    type: GET_TRENDING,
    payload: res.data.results,
  });
};




const Card = (props) => (
      <Panel {...props} bordered header='Card title'>
        {trending && trending.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}
      </Panel>
    );

export const getTrending=（）=>async（dispatch）=>{
const res=等待axios.get(
`https://api.themoviedb.org/3/movie/popular?api_key=KEY&language=en-美国&page=1`
);
派遣({
类型：获取趋势，
有效载荷：res.data.results，
});
};
康斯特卡=（道具）=>(
{trending&&trending.map（（i）=>(
{i.title}
))}
);

答案很简单。您所要做的就是首先从api获取数组，然后通过它进行映射<代码>趋势。未设置结果，因此显示错误<代码>无法读取未定义的属性映射

使用三元运算符：

    {trending.results && trending.results.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}

{trending.results&&trending.results.map（（i）=>(
{i.title}
))}

“trending.results”之所以有效，是因为在API的“results”中有另一个数组。是的，请您添加控制台或应用程序中的数据图像。

    {trending.results && trending.results.map((i) => (
          <React.Fragment key={i.id}>
            <h6>{i.title}</h6>
          </React.Fragment>
        ))}