反應怪異的渲染行為

Question

即使打印items在返回函數之前記錄了一個填充的數組 ，它也不會真正呈現任何內容。 我知道一個事實，即正確顯示html並不是問題。 因此，我變得可疑並在返回函數中對其進行了字符串化處理，以查看是否確實存在正在記錄的數據，並且令我恐懼的是，我意識到它不是。 如代碼所示，在return函數中，我得到一個空數組！

class Derp extends Component {

    constructor(props){
        super(props);

        mainStore.subscribe(this.render.bind(this));
    }

    render(){
        var items = mainStore.getState().itemReducer.items;

        console.log(items); //yields an array of items as expected

        return (
            <div>
                <span>{JSON.stringify(items)} </span> //yields [] in the DOM !!!!!!!
                //when it should yield the same as above, a fully populated array
                {
                items.map(item =>
                <div key={item.id}>
                     {item.name}
                </div>
                )
                }
            </div>
            )
    }

}

我已經成功完成了無數次，但是這次我只是想不出這可能出什么問題。。謝謝您抽出寶貴的時間。

編輯1：我知道這看起來很有價值（因為它是），但是該組件正在偵聽所有狀態更改，如下所示： mainStore.subscribe(this.render.bind(this)); 因此它應該始終可以訪問更新的數據。

PS：我知道比較聰明的組件，而不是使用ReactRedux，而是嘗試並嘗試了一些不同的方法來引起好奇。 這是一種自我強加的“研究”代碼。 這不是用於生產或項目。

Answer 1

從map函數返回div ：

items.map(item =>
    return <div key={item.id}>
        item.name
    </div>
)

Answer 2

嘗試轉義要呈現的內容：

items.map(item =>
  <div key={item.id}>{item.name}</div>
)

Answer 3

我的代碼有兩個問題：

1. 您正在嘗試返回多個元素。 如果您尚未使用react16，則需要將這兩個元素包裝在div或其他東西中。 如果您使用react16，則可以將它們以數組形式返回。
2. 您的item.name必須大括號。 JSX標記內的任何JS都需要大括號。 （這就是他們知道它是JS而不是標記的方式）。

react16 +

    return [
        <span>{JSON.stringify(items)} </span>,
        ...items.map(item =>
           <div key={item.id}>
               {item.name}
           </div>
        )
    ]

<react16

    return (
        <div>
            <span>{JSON.stringify(items)} </span>
            {items.map(item =>
                <div key={item.id}>
                    {item.name}
                </div>
            )}
        </div>
    )

Answer 4

看來問題出在直接調用render。 而是調用forceUpdate（）可以正常工作。 我不是100％為什么會發生這種情況，但我懷疑獨自調用render並沒有多大意義，因為可能需要在React管道的React上下文中調用它。 我可能會很不舒服，如果是的話，請標記我，並描述一下我目前能夠做的更好的事情。

感謝大家的幫助。