React中如何让else语句仅返回单行提示？用户日程渲染问题求助

问题根源 #

你当前在routines.map的else分支返回提示组件，会导致每个不属于当前用户的routine都渲染一次提示，所以出现重复的“未找到活动”文本。

解决方案：先过滤再渲染 #

正确的做法是先从routines数组中筛选出当前用户的日程，再根据筛选结果决定渲染卡片还是提示：

修改后的代码 #

// 先筛选当前用户的日程
const userRoutines = routines.filter(routine => routine.creatorName === currentUser);

// 根据筛选结果渲染内容
return (
  <>
    {userRoutines.length > 0 ? (
      userRoutines.map((routine) => (
        <div className="routineCard" key={routine.id}> {/* 记得添加唯一key属性 */}
          <h3>Routines</h3>
          <p>Name: {routine.name}</p>
          <p>goal: {routine.goal}</p>
          <p>User: {routine.creatorName}</p>
          <ul>
            Activities
            <li className="routineActivityCards">
              {routine.activities.map((activity) => (
                <div className="routineActivityCard" key={activity.id}> {/* 子列表同样需要key */}
                  <ul>
                    <h5>{activity.name}</h5>
                    <p>Info: {activity.description}</p>
                    <p>Count: {activity.count}</p>
                    <p>Duration: {activity.duration}</p>
                  </ul>
                </div>
              ))}
            </li>
          </ul>
        </div>
      ))
    ) : (
      <div>
        <h1>未找到活动，请在上方创建一个</h1>
      </div>
    )}
  </>
);

关键说明 #

1. 过滤数组：用filter先筛选出当前用户的日程，避免在map中逐个判断，减少冗余逻辑。
2. 判断长度渲染：通过userRoutines.length判断是否有数据，有数据则渲染卡片列表，无数据则只渲染一次提示。
3. 添加key属性：React列表渲染必须加key，帮助React高效更新DOM，这里假设你的routine和activity对象有唯一id属性，没有的话可以用其他唯一标识（不推荐用索引作为key）。

关于你提到的routine[0]思路 #

这个思路并不适用，因为即使取第一个元素，也无法处理多个属于当前用户的日程，而且依然会存在非当前用户日程的遍历问题，先过滤再渲染是更合理的方案。

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