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

Question

我的代码有问题，我使用 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: "????????",
    completed: true,
    date: "22/01/2019 10:30",
    rate: 9.1,
    categories: {
      de: 1,
      sp: 2,
      uk: 0,
      fr: 1,
      us: 4,
    },
  },
  {
    id: 2,

我的组件DidMount：

componentDidMount() {
    this.fetchDemo();
    this.fetchUser();
  }

我前面的抓取：

 fetchDemo() {
    this.props.demoFetchRequest();
    const { marketId } = this.props.match.params;
    axios.get(`/api/v1/passport-authenticate/market/${marketId}`)
      .then((res) => { return res.data; })
      .then(demo => this.props.demoFetchSuccess(demo))
      .catch(error => this.props.demoFetchError(error));
  }

我的回报：

const { demo } = this.props;

我的渲染

<h5>{demo.title}</h5>
          <p>
            Demo
            {' '}
            {demo.flag}
          </p>
          {demo.map((el) => {
            return (
              <div>
                {Object.keys(el.categories).map((key) => {
                  return (
                    <p>
                      {key}
                      :
                      {el.categories[key]}
                    </p>
                  );
                })}
              </div>
            );
          })}

当我更改 Object.keys() 时出现另一个错误 TypeError: can't convert undefined to object

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

你能帮我吗？

Answer 1

Map 是 Array 原型上的一个方法。

代码 demo.map 仅在 demo 是一个数组时才有效，但在您的代码中它似乎是一个对象。

看起来您的意思是您的渲染方法略有不同，可能是：

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

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

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

以上有几点需要注意：

1. 如果您的数据实际上是一个演示数组，而不是单个演示对象，那么您需要映射该演示对象数组。您调用 demo.title 的方式似乎表明情况可能并非如此？
2. 我们检查 demo.categories 确实存在。
3. 对类别对象执行 Object.keys 后，我们就不再需要 object.keys - 类别对象的属性只是字符串。