javascript SolidJS：“无法识别的值”

r7xajy2e 于 2023-01-07 发布在 Java

关注(0)|答案(2)|浏览(189)

我能够很好地从API路径接收JSON值。

培养瓶代码

app = Flask(__name__)
CORS(app)

@app.route("/cats-matches", methods=['POST'])
def cats_matches():
    person = {"name": "John"} #Does not work
    #person = [{"name": "John"}] #This works

    return person

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

固体JS

Go”按钮将web_orders信号设置为具有名称数据的对象
这会触发cats_matches资源运行fetchCatsMatches（）
我在页面上调用**{cats_matches（）}**只是为了转储数据
如果我从Flask路由返回一个List，则**"[Object object]"**正确显示
从Flask返回Dict页面上未显示任何内容，并出现控制台错误：无法识别的值。跳过插入{name：约翰}

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;

JavaScript

来源：https://stackoverflow.com/questions/75036718/solidjs-unrecognized-value

2条答案

按热度按时间

d4so4syb1#

这是因为您直接在呈现逻辑中使用了一个对象，而jsx不能直接呈现对象，因此，不要输出资源，而是尝试将其字符串化，这样可以避免呈现错误：

<p>{JSON.stringify(cats_matches()}</p>

与使用对象值相比，Solid更允许直接使用数组值。无论哪种情况，您都会出错，[Object object]并不意味着您正在打印值。对于数组，当DOM元素创建时，值会以某种方式转换为字符串，您会看到[Object object]。
你可以很容易地观察到这一点：

import { render } from 'solid-js/web';

const App = () => {
  const getValue = () => {
    return {"name": "John"};
  }
  
  return (
    <>
      <p>{getValue()}</p>
    </>
  );
}

render(App, document.body);

您将获得：

Unrecognized value. Skipped inserting 
Object {name: "John"}

尝试将值 Package 在数组中，您将看到错误消失，段落内容变为[Object object]。
顺便说一句，您可以将应用程序 Package 在错误边界中，以获得更好的错误结果：

const fallback = (err) => {
  console.log(err);
  return err.message;
}

<ErrorBoundary fallback={fallback}>
<App>{/* App content */}</App>
<ErrorBoundary

赞(0）回复(0）举报 2023-01-07

0x6upsns2#

我测试了代码，我发现你可以设置初始值

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

现在按如下所示更改您的显示代码

<>
   <button onClick={() => getCatsMatches()} >Go</button>
   <p>{cats_matches().name}</p>
</>

或者也可以使用以下示例中的SuspenseExample1，Example2，Example3

赞(0）回复(0）举报 2023-01-07

我来回答

javascript SolidJS：“无法识别的值”

培养瓶代码

固体JS

2条答案

相关问题

热门标签

最新问答