React-Modal出现‘Objects are not valid as a React child’报错求助

嘿，这个报错我太熟了！问题出在你以为selectedOption是字符串，但实际上它是个带option键的对象——React根本没法直接渲染对象，这就是报错的根源。

我给你拆解下解决方案：

1. 先搞清楚selectedOption的真实结构 #

你大概率是从一个对象数组里随机选了元素，比如代码可能是这样的：

// 示例：你的选项数组是对象格式
const options = [{option: "选项A"}, {option: "选项B"}, {option: "选项C"}];
// 随机选中后得到的是整个对象，不是字符串
const selectedOption = options[Math.floor(Math.random() * options.length)];

这时候selectedOption的值是{option: "选项X"}，不是纯字符串，直接塞到<p>里当然会报错。

2. 方案一：直接渲染对象里的属性 #

既然它是对象，你需要明确取出里面的option属性来渲染：

{props.selectedOption && <p>{props.selectedOption.option}</p>}

这样React就能渲染对象里的字符串内容了，而不是对象本身。

3. 方案二：提前把selectedOption处理成字符串 #

如果你的业务逻辑允许，在生成随机选中项的时候，直接提取字符串：

// 生成时就取出option属性，让selectedOption变成字符串
const selectedOption = options[Math.floor(Math.random() * options.length)].option;

这样之后你原来的渲染代码{props.selectedOption && <p>{props.selectedOption}</p>}就能正常工作了。

4. 额外小技巧：用可选链让代码更安全 #

如果你担心selectedOption可能是undefined或者null，可以用可选链操作符避免潜在的类型报错：

// 针对对象的情况
{props.selectedOption?.option && <p>{props.selectedOption.option}</p>}

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