为什么state不显示新创建的空对象？找到解决方法

Question

我正在使用react 16.3.0-alpha.1，并且在将一个空对象添加到列表对象中时，键和＃34; items＆＃34;会出现问题。

Addlist.js

createList = event => {
    //Stop form from submitting
    event.preventDefault();

   const list = {
       items: {},
       title: this.titleRef.current.value
   };
   this.props.addList(list); //This method lives in app.js

   // Clear the form after submitted
   event.currentTarget.reset();
};

App.js

state = {
    lists: {}
};

//Add new list with title and empty items object
addList = list => {

    // Take a copy of current state
    const lists = { ...this.state.lists };

    // Add new list to the lists collection
    lists[`${list.title}`] = list;

    console.log(lists);

    // Set the new lists collection to state
    this.setState({ lists: lists });
};

当createList事件触发时，它调用app.js上的addList方法并将列表对象传递给方法。当我在setState之前控制日志列表时，我可以看到＆＃34; list3＆＃34;添加了＆＃34;项目＆＃34;和＆＃34;标题＆＃34;。但是，当我使用开发工具查看状态时，它只显示键＆＃34;标题＆＃34;有它的价值。我也得到一个错误，说明关键＆＃34;项目＆＃34; on＆＃34; list3＆＃34;为null或未定义。

我在这里做错了什么？ 是否反应删除了setState上的空对象，是浅拷贝问题还是其他什么？

所以我找到了解决方法，但我仍然不知道为什么我不能添加空物体。

对于解决方法，我将list.items = {}更改为list.items =＆＃34;＆＃34; 。这次空字符串确实被添加了。然后在一个方法中我将一个新项添加到＆＃34; list.items＆＃34;我首先检查它是否是一个字符串。如果它是一个字符串，那么我设置＆＃34; list.items＆＃34;从字符串到空对象。这允许我继续添加嵌套对象。这一步也发生在setState之前。

如果你知道是什么原因，请告诉我。