React数组遍历仅渲染单个组件问题求助

问题根源 #

1. for循环只渲染第一个组件的原因 #

你写的for循环里，第一次迭代就执行了return，这会直接终止renderState函数，循环根本不会继续执行后续迭代，所以只会渲染第一个ProfileCard，迭代变量i自然始终停在0。

2. forEach和map无渲染结果的原因 #

• forEach：这个方法仅用于遍历数组执行回调，不会返回任何值，所以你的else分支最后没有返回有效的JSX元素，自然看不到渲染结果。
• 若你用了map但没渲染，大概率是没把map生成的组件数组return出去，只是执行了map操作却未返回结果。

正确写法 #

直接用map方法遍历数组，返回组件数组即可，React会自动渲染数组中的所有组件：

const renderState = () => {
    if (loading) {
      return <p>Loading...</p>;
    } else if (hasErrors) {
      return <p>Can not load the page.</p>;
    } else {
      // map返回组件数组，React会逐个渲染
      return users.map(user => (
        <ProfileCard key={user.id} user={user} />
      ));
    }
  };

额外说明 #

• 必须给每个遍历生成的组件加唯一的key属性，这里用user.id是合适的（确保id唯一），不要用数组索引当key，避免组件复用导致的异常。
• 如果一定要用for循环，需要先把所有组件存到数组里，最后统一return：

const renderState = () => {
    if (loading) {
      return <p>Loading...</p>;
    } else if (hasErrors) {
      return <p>Can not load the page.</p>;
    } else {
      const cards = [];
      for (let i = 0; i < users.length; i++) {
        cards.push(<ProfileCard key={users[i].id} user={users[i]} />);
      }
      // 最后统一返回组件数组
      return cards;
    }
  };

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