SolidJS报“Unrecognized value”：Flask返回字典失效问题求助

问题详情 #

我能正常从API接口接收JSON数据，但遇到以下异常：

• 当Flask路由返回单个字典{"name": "John"}时，SolidJS页面无内容显示，控制台报错：Unrecognized value. Skipped inserting {name: 'John'}
• 当Flask返回包含字典的列表[{"name": "John"}]时，页面能正常显示"[Object object]"

Flask代码 #

app = Flask(__name__)
CORS(app)

@app.route("/cats-matches", methods=['POST'])
def cats_matches():
    person = {"name": "John"} # 无法正常渲染
    #person = [{"name": "John"}] # 可正常渲染

    return person

if __name__ == "__main__":
    app.run(host="0.0.0.0",debug=True)

SolidJS执行逻辑 #

• 点击“Go”按钮会将web_orders信号设置为包含数据的对象
• 触发cats_matches资源执行fetchCatsMatches()请求API
• 页面中通过{cats_matches()}尝试渲染返回的数据

SolidJS代码 #

import { createSignal, createResource } from "solid-js";

const fetchCatsMatches = async (web_orders) =>
  (await fetch('http://127.0.0.1:5000/cats-matches', {
    method: "POST",
    body: JSON.stringify(web_orders),
    headers:{
      "Content-type": "application/json; charset=UTF-8",
      "Accept": "application/json"
    }
  })).json();

const CatsCustomerMatches = () => {
  const [web_orders, setWebOrders] = createSignal([]);

  const [cats_matches, { mutate, refetch }] = createResource(web_orders, fetchCatsMatches);

  const getCatsMatches = () => {
    setWebOrders([{'po': 123}]);
  };

  return (
    <>
      <button onClick={() => getCatsMatches()} >Go</button>
      <p>{cats_matches()}</p>
    </>
  );
}

function App() {
  return (
    <div class="grid grid-cols-1">
      <CatsCustomerMatches />
    </div>
  );
}

export default App;

原因分析 #

JSX（包括SolidJS的JSX）无法直接渲染普通JavaScript对象。当返回列表时，数组会被自动转换为字符串"[Object object]"，所以能显示；但单个字典属于普通对象，JSX无法解析，因此抛出报错并跳过渲染。

解决方案 #

方案1：渲染对象的具体属性 #

如果只需要展示对象中的某个字段，直接访问对应属性即可：

<p>{cats_matches()?.name}</p>

（使用可选链?.避免数据未加载时的报错）

方案2：将对象转为JSON字符串显示 #

如果需要展示整个对象的结构，用JSON.stringify()把对象转换成字符串：

<p>{cats_matches() ? JSON.stringify(cats_matches()) : '加载中...'}</p>

方案3：保持Flask返回列表结构（按需选择） #

如果业务逻辑允许，继续返回列表，同时在SolidJS中遍历列表渲染更友好的内容：

<ul>
  {cats_matches()?.map(item => <li key={item.name}>{item.name}</li>)}
</ul>

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