Question

我试图从react函数返回一些新的HTML。但我似乎可以得到正确的语法。我假设某处需要再有一个return语句。

我收到以下错误

ConnectedList（...）：渲染没有返回任何内容。这通常   表示缺少退货声明。或者，为了不渲染，返回   空。

在user.map前面添加return语句时，我得到了   TypeError：user.map不是函数

import React from "react";
import { connect } from "react-redux";

const mapStateToProps = state => {
    console.log("List state", state);
  return { user: state.users };
};


const ConnectedList = ({ user }) => {
  console.log("user object",user);

  /* return */user.map((user, index) => {
    console.log("test", user);
    return (<div>user info: {user.user}</div>)
  }
  )
}

const List = connect(mapStateToProps)(ConnectedList);

export default List;

这是它从中获取信息的商店。

export default {
    "users":[
        {"id":1, "user": "Test user 1"}, 
        {"id":2, "user": "Test user 2"}
    ]
    }

UserActions.js

import $ from 'jquery';
import axios from 'axios';
import users from '../store/store';

export const UPDATE_USER = 'users:updateUser';
export const NEW_USER = 'users:newUser';

export function updateUser(newUser)  {
    console.log("newUser: ", newUser);
    return {
        type: UPDATE_USER,
        payload: users
    }
}

userReducer.js

import {UPDATE_USER, NEW_USER} from '../actions/userActions';

export default function userReducer(state = '', {type, payload}) {
    console.log("payload:",payload);
    switch (type) {
        case UPDATE_USER:
            return payload;
        case NEW_USER:
            return payload;
        default:
        return state;
    }
}

Answer 1

您的const ConnectedList = ({ user }) => { console.log("user object",user); return user.map((user, index) => { console.log("test", user); return (<div key={index}>user info: {user.user}</div>) } ) }未返回antyhing：

 symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;

您还需要为数组中的每个元素分配key。

在React / Redux中使用ES6循环数组

1 个答案: