React中数组映射后文本不显示问题排查求助

问题描述 #

我使用map函数将数组中的套餐信息渲染为层级卡片，逻辑看似无误，但所有内容都无法显示。控制台提示需要key后我已添加该属性，麻烦帮忙排查代码中的问题。

代码示例 #

import React from 'react'
import styled from 'styled-components'

function Plans() {

    const notePlans = [
    {
        name:"NoteZ Free",
        price:"$0",
        features: [
            "1 user per account",
            "Unlimited notes",
            "4 categories to choose from",
            "Help Support"
            ]
    },
    {
        name:"NoteZ +",
        price:"$5",
        features: [
            "2-4 users per account",
            "Unlimited notes",
            "Folder system for notes",
            "Custom categories",
            "Custom templates to choose from",
            "Help Support"
        ]
    },
    {
        name:"NoteZ Infinity",
        price:"$10",
        features: [
            "Unlimited users per account",
            "Unlimited notes",
            "Folder system for notes",
            "Custom categories",
            "Full integration with MealZ",
            "Full integration with WorkoutZ",
            "Custom templates to choose from",
            "Help Support"
        ]
    }
    ]

  return (
    <Main>
        <div className='pricing-container'>
            {notePlans.map((plan) => (
                <div className='pricing-card' key={plan.name}>
                    <h2>{plan.name}</h2>
                    <p>{plan.price}</p>
                    <ul>
                        {plan.features.map((feature,index) => (
                            <li key={index}>{feature}</li>
                        ))}
                    </ul>
                    <button>Buy Now</button>
                </div>
            ))}
        </div>
    </Main>
  )
}

const Main = styled.div`
    width:100%;

    .pricing-container{
        border:1px solid black;
        color black;
        
    }
`;

export default Plans 

问题排查与修复 #

1. 样式语法错误：这是导致内容不显示的核心问题。在styled-components的样式定义中，.pricing-container里的color black缺少了冒号，正确写法应为color: black;。语法错误会导致样式解析失败，可能出现文字颜色与背景色一致（默认背景为白色，文字未正确设置颜色时也会是白色），或者直接引发样式渲染异常，导致组件内容不可见。

2. 其他验证点：

   • 确认Plans组件已在父组件中正确导入并使用，如果组件未被引用，自然不会显示任何内容。
   • notePlans数组定义正常，map遍历逻辑没有问题；key的使用也符合要求（plan.name是唯一值，features用index作为key虽不是最佳实践，但不会导致组件不渲染）。

修复后的样式代码 #

const Main = styled.div`
    width:100%;

    .pricing-container{
        border:1px solid black;
        color: black; /* 修复语法错误，添加冒号 */
    }
`;

内容的提问来源于stack exchange，提问作者NS1