React Native中Context Provider触发「Text需在<Text>组件内渲染」错误

错误原因 #

你的CitiesProvider组件return语句里，JSX标签和{children}之间存在多余空格，这些空格会被React解析为独立的文本节点。而React Native要求所有文本内容必须包裹在<Text>组件内，因此触发了该错误。

看你Context代码中的return部分：

return   <CitiesContext.Provider value={{AddCity}}> {children}</CitiesContext.Provider>

这里<CitiesContext.Provider>标签后、{children}前后的空格都会被识别为文本内容，导致报错。

修复方案 #

去掉标签与{children}之间的多余空格，修改为：

return <CitiesContext.Provider value={{AddCity}}>{children}</CitiesContext.Provider>

如果需要保持代码格式整洁，也可以用括号包裹JSX，同时确保换行缩进不会产生额外文本节点：

return (
  <CitiesContext.Provider value={{AddCity}}>
    {children}
  </CitiesContext.Provider>
)

额外优化建议 #

1. 规范AddCity的参数类型，与接口定义保持一致，同时优化状态更新逻辑：

function AddCity(name: string | undefined) {
  if (!name) return; // 避免添加空名称的城市
  const newCity = { name };
  setCity(prev => ({ ...prev, city: newCity })); // 函数式更新防止状态覆盖
  console.log(newCity);
}

2. 给useState指定明确的类型，避免类型歧义：

const [city, setCity] = useState<Cities>({ city: { name: '' } });

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