使用 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,

我的 componentDidMount ：

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. 一旦我们对 category 对象执行了 Object.keys，我们就不再需要 object.keys - Categories 对象的属性只是字符串。