Question

我有以下数据集Json文件。

在ajax检索json文件后，我调用了以下reducer。

export default function clientProfile(state={}, action) {

    switch(action.type) {

        case GET_CLIENT_SUCCESS:
            return action.payload;

        default:
            return state;
    }

}

我想在this.state.client.notes上使用reverse（）和.map但是我一直得到undefined或null错误。当我做以下事情时结果......

console.log(typeof this.state.client); //returns object
console.log(typeof this.state.client.notes); //returns undefined

我确保以正确的格式返回json文件（希望如此），但我不明白为什么嵌套状态不是对象而是未定义。无论如何要解决此问题，以便我可以使用.reverse（）和.map函数，还是按预期工作？如果它的工作目的是除了创建一个单独的减速器之外还有其他选择。我希望笔记处于客户端状态。

    {
    "customerId": "34",
    "agentId": "1",
    "createdDate": "1510223892",
    "firstname": "John",
    "lastname": "Doe",
    "mobile": "123456789",
    "address": "Something email here",
    "notes": {
        "0": {
            "noteId": "1",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510316194",
            "note": "add something"
        },
        "1": {
            "noteId": "2",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510316527",
            "note": "add something"
        },
        "2": {
            "noteId": "3",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510317177",
            "note": "add new thing"
        },
        "3": {
            "noteId": "4",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510318448",
            "note": "something"
        },
        "4": {
            "noteId": "5",
            "customerId": "34",
            "createdBy": "1",
            "created": "1510318476",
            "note": "this would be note number 5, lets see whether we can get something from this."
        }
    }
}

感谢您搞清楚，如果我将console.log放在render（）中，我确实将它作为对象返回。我被困了，因为我也引用了这个链接

map function for objects (instead of arrays)

所以我有以下代码内幕渲染（）

//$.map(this.props.client.notes, function(note, key) { //This works, but i cannot use reverse()

//Object.keys(this.props.client.notes).map(function(key, note) { //this doesn't work and return error


Object.keys(this.props.client.notes).map(function(key, index) {

 return (
    <li key={key}>

    <div>Key: {key} | Note_id: {this.props.client.notes[index].noteId} AND Note_content: {this.props.client.notes[index].note}</div>
    </li>

）;

现在我们发现它是一个对象，但上面的代码仍然不起作用。如果我可以找出客户端状态的数据类型，那么我可以知道该怎么做。

同时，上述内容会返回以下错误 ×

TypeError：无法将undefined或null转换为object

更新：有条件的代码下面的答案我更新了我的代码，创建了printNote（）的函数，并将{this.printNote}放在渲染中。

我可以看到所有键的控制台日志，但是，它没有在屏幕上呈现。

printNote() {
        console.log(this.props);
        console.log(this.props.client.notes);

        let notes = this.props.client.notes;
        console.log('notes',notes);
        if(notes) {
            console.log('in if ');
             Object.keys(notes).map(function(key, index) {


                    console.log(key);
                    return (
                            <li key={key}>
                                <div>Key: {key} | Note_id: {notes[index].noteId} AND Note_content: {notes[index].note}</div>
                            </li>


                    );

                })

            }
        }

Answer 1

您没有在尝试访问该对象的位置发布代码：

this.state.client.notes

但我的打赌是你试图在获取操作（异步是异步的）之前访问它，因此你得到client reducer的初始状态，它是空对象。

至于在.map上使用notes，这不起作用，因为.map属于Array.prototype而notes是一个对象而非数组。< / p>

修改
作为更新的后续内容。

这是一个简单的情况，render方法在从服务器获取任何数据之前运行如果要渲染异步获取的数据，则应该有条件地执行此操作。

例如：

const { client } = this.props; // just destructuring the object for shorter lines client.notes && Object.keys(client.notes).map(function(key, index) { return ( < li key = { key } > < div > Key: { key } | Note_id: { this.props.client.notes[index].noteId } AND Note_content: { this.props.client.notes[index].note } < /div> < /li>

仅当client.notes返回真值（these are the falsy values）
时才会执行地图行

React + Redux - Reducer子状态不是对象吗？

1 个答案: