React通过Context传递对象后map遍历渲染异常问题咨询

问题根因 #

你在JSX中直接书写activity.name属于纯文本内容，React不会将其解析为变量读取，需要用JSX的变量插值语法（花括号{}）包裹变量。

修复后的Activity.jsx代码 #

const { activities, functions, ref } = useContext(Context);
return (
    <section className="activity-container">
        <input type="text" ref={ref.inputValue} />
        <button onClick={functions.addActivity}>add!</button>
        {
            activities.map(activity => (
                <h1 key={activity.key}>{activity.name}</h1>
            ))
        }
    </section>
);

额外说明：遍历渲染列表元素时必须为每个元素添加唯一key属性，避免React渲染时报错，这里直接复用你生成的activity.key即可。

可选优化点（避免后续隐患） #

• App.jsx中的setActivity写法存在闭包隐患，改为函数式更新更稳妥：

  const addActivity = () => {
      const activity = {
          key: Math.random() * Math.random(),
          name: inputValue.current.value,
      };
      setActivity(prevActivities => prevActivities.concat(activity));
  };
  

  这种写法每次更新都会拿到最新的activities状态，不会因为闭包拿到旧值导致更新异常。
• 用Math.random()生成key存在极低概率的重复风险，对稳定性要求高的场景可以改用crypto.randomUUID()生成唯一id。

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