Javascript 使用redux和reactJs读取数据时出错

我的代码有问题，我使用reactJs和redux

我的错误： TypeError:demo.map不是函数

我的行动：

// DEMO
export const demoFetchRequest = () => {
  return {
    type: DEMO_FETCH_REQUEST,
  };
};
export const demoFetchSuccess = (demo) => {
  return {
    type: DEMO_FETCH_SUCCESS,
    demo,
  };
};
export const demoFetchError = (error) => {
  return {
    type: DEMO_FETCH_ERROR,
    error,
  };
};

我的减速机：

const initialState = {
  loading: false,
  demo: [],
  error: null,
};
const demo = (state = initialState, action) => {
  switch (action.type) {
    case DEMO_FETCH_REQUEST:
      return { ...state, loading: true };
    case DEMO_FETCH_SUCCESS:
      return { ...state, loading: false, demo: action.demo };
    case DEMO_FETCH_ERROR:
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

我的数据：

const demoCompletedData = [
  {
    id: 1,
    marketId: "1111-1111-1111-1111",
    title: "Autonomous car",
    picture: "https://th?id=OIP.fdvfdvfdvfdvfd&pid=Api",
    language: "English",
    flag: "Map is a method on the Array prototype.


The code 
demo.map
 will only work if demo is an array, but in your code it appears to be an object.


It looks like your meant your render method to be slightly different, perhaps like:


<h5>{demo.title}</h5>
          <p>
            Demo
            {' '}
            {demo.flag}
          </p>
          {demo.categories.map((el) => {
            return (
              <div>              
                    <p>                      
                      {el}
                    </p>
              </div>
            );
          })}

const demoCompletedData=[
{
id:1，
市场化：“1111-1111-1111-1111”，
标题：“自动驾驶汽车”，
图片：“https://th?id=OIP.fdvfdvfdvfdvfd&pid=Api",
语言：“英语”，
flag:“Map是原型上的一个方法

代码
demo.map
仅当demo是一个数组时才起作用，但在代码中它似乎是一个对象

看起来您的渲染方法略有不同，可能类似于：

{demo.categories && Object.keys(demo.categories).map((el) => {
            return (
              <div>              
                    <p>                     
                      {el.categories[key]}
                    </p>            
              </div>
            );
          })}

{demo.title}

演示
{' '}
{demo.flag}

{demo.categories.map（（el）=>{
返回(

{el}

);
})}

我还注意到类别是一个对象，而不是数组，因此渲染方法中处理类别的部分应该是这样的：

{demo.categories&&Object.keys（demo.categories.map（（el）=>{
返回(

{el.categories[key]}

);
})}

以上内容有几点需要注意：

如果您的数据实际上是演示的数组，而不是单个演示对象，那么您需要映射该演示对象数组
我们检查demo.categories是否确实存在
在categories对象上执行Object.keys后，我们不再需要Object.keys-categories对象的属性只是字符串
谢谢你的帮助，但我有一个错误：demo.categories是undefined@user11429164如果categories对象可能未定义，那么您需要添加一些代码来检查它是否存在。正如您在前面的问题中所看到的，您应该首先映射传入的数据，这就是为什么您不能在
演示
上使用
映射
s@DavidHall指出。同样，正如他所说的，你需要检查你的数据。你有一个
加载
状态，使用它。这就是你保留它的原因。有条件地呈现你的数据，如果
加载
是真的，则呈现其他内容（微调器等）然后在提取完成后，呈现您的数据。@devserkan谢谢，没关系，我可以读取对象“类别”的数据，现在我尝试使用Conditional render呈现我的数据。除了您的问题，我认为使用
redux thunk
并将提取逻辑移动到您的操作创建者会更好。您可以触发不同的操作（与fetchRequest一样，fetch本身）在一个函数中。@devserkan与thunkMiddleware？类似于demo.service与fetch，demo.action与dispatch？是的，
redux-thunk
是一个中间件，用于
redux
使用异步操作，如果你说的是“thunkMiddleware”“。啊，如果问题的答案解决了你的问题，请毫不犹豫地接受这些答案。我不知道你所说的“服务”和“行动”是什么意思，但这里有一个简单的例子说明你是如何做到的：寻找
auth
行动。