Question

即使打印items 在返回函数之前记录一个填充的数组，它也不会真正呈现任何内容。我知道一个事实，它不是一个不正确显示HTML的问题。所以我怀疑并在返回函数中对其进行字符串化以确定数据即时记录是否确实存在并且对我的恐惧我意识到它不是。如代码所示，在返回函数中，我得到一个空数组！

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));所以它应该始终可以访问更新的数据。

P.S：我知道愚蠢与聪明的组件，我不使用ReactRedux，我只是试验并尝试一些不同的东西，好奇心的震动。这是一种自我强加的“研究”类代码。这不适用于生产或项目。

Answer 1

从div函数返回map：

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

我在您的代码中看到两个问题：

您正在尝试返回多个元素。如果您在react16之前，则需要将这两个元素包装在div或其他内容中。如果您正在使用react16，则可以将它们返回到阵列中。
你的item.name需要大括号。 JSX标记中的任何JS都需要花括号。（这就是他们如何知道它的JS而不是标记）。

react16 +

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

<强>＆LT; react16

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

Answer 4

似乎问题是直接调用渲染。而是调用forceUpdate（）工作正常。我不是100％为什么会发生这种情况，但我怀疑在它上面调用render并不意味着它可能需要在React管道中的React上下文中调用。我可能会非常失望，如果是这样的话，请告诉我并将其描述得更好，我现在能够做到。

感谢大家的帮助。

反应奇怪的渲染行为

4 个答案: