了解React本机错误

Question

我经常遇到经常使我感到困惑或误导的错误，我想我有一个清晰的例子来炫耀这个问题，并且想知道如何更好地利用提供给我的错误信息。

这是我在render（）中的工作代码，首先为空，然后通过action / reducer进行填充：

const thiswillwork = this.props.memoryBoxColors.map((color) => {

                return (
                    <Picker.Item label={"Box Colour: " + color.descriptor} value={color.boxColorID} />
                );
            })

但是，由于memoryBoxColors中包含其他信息，所以我不想在选择器中显示它，所以我添加了此信息，这是行不通的：

const whywontthiswork = this.props.memoryBoxColors.map((color) => {

                return **color.IWantToShowThis == 1 &&** (
                    <Picker.Item label={"Box1 Colour: " + color.descriptor} value={color.boxColorID} />
                );
            })

当我尝试运行该代码时，出现以下错误：该错误位于我的选择器启动的代码行中，因为它使用自身内部的“ whywontthiswork”作为要显示的项目。 / p>

如果我不知道在返回值上添加一个真/假条件是造成这种情况的原因，那么从逻辑上讲，我应该如何跟踪该错误并找出问题的根源？读取该错误表明该代码的“ this.props”部分是问题所在，而我经常遵循这些建议并且浪费了很多时间，因为该问题是错误消息所未指明的。