检查道具是否未定义时遇到问题

Question

所以我的项目中有一个页面，它有一个 get，然后它将响应传递给一个 const，如下所示。

const [reference, setReference] = useState([])   
 
useEffect(() => {
            api.get(`/${props.route.params.index}`).then( response => {
                setReference(response.data)
                setLegendaryAction(response.data.legendary_actions)
            }).catch( error => 
                console.log(error) 
            )
        }, [])

然后我将引用的不同部分传递给同一组件的多个实例。 如下例，有reference.action 和reference.reaction。我总会有一个动作，但有时 Reaction 是未定义的，所以我在渲染组件之前检查它是否为真。

                <ReferenceDetails 
                    detailTitle="Actions" 
                    details={reference.actions}
                />
                {reference.reactions && 
                    <ReferenceDetails 
                         detailTitle="Reactions" 
                         details={reference.reactions}
                    />
                }

但它给了我这个错误：

错误：文本字符串必须在组件内呈现。

但是当我执行 console.log(reference.reactions) 时，它返回未定义。 有人可以在这里阐明一下吗？

Answer 1

console.log(reference.reactions) 最初应该给出 undefined 然后给出期望值。您是否尝试过 console.log(reference?.reactions) ？ 或者，console.log(reference && reference.reactions)