[英]SolidJS: "Unrecognized value"
I am able to receive the JSON value from the API path just fine.我能够从 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)
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;
That is because you are using an object directly in your rendering logic and jsx can not render objects directly.那是因为你在你的渲染逻辑中直接使用了一个 object 而 jsx 不能直接渲染对象。 So, rather than outputting the resource, try stringifying it, so that you can avoid rendering errors:
因此,与其输出资源,不如尝试将其字符串化,以避免呈现错误:
<p>{JSON.stringify(cats_matches()}</p>
Solid somehow is more permissive with using array values directly than using object values.与使用 object 值相比,Solid 在某种程度上更允许直接使用数组值。 Either way you have error, [Object object] does not mean you are printing the value.
无论哪种方式都有错误,[Object object] 并不意味着您正在打印该值。 In the case of an array, the value somehow gets converted into a string when the DOM element getting created and you see [Object object].
在数组的情况下,当创建 DOM 元素并且您看到 [Object object] 时,该值会以某种方式转换为字符串。
You can observe this easily:你可以很容易地观察到这一点:
import { render } from 'solid-js/web';
const App = () => {
const getValue = () => {
return {"name": "John"};
}
return (
<>
<p>{getValue()}</p>
</>
);
}
render(App, document.body);
You will get:你会得到:
Unrecognized value. Skipped inserting
Object {name: "John"}
Try wrapping the value in an array, you will see the error is gone and the paragraph content becomes [Object object].尝试将值包装在数组中,您会看到错误消失并且段落内容变为 [Object object]。
As a side note, you can wrap your application in an error boundary to get bettor error results:作为旁注,您可以将应用程序包装在错误边界中以获得更好的错误结果:
const fallback = (err) => {
console.log(err);
return err.message;
}
<ErrorBoundary fallback={fallback}>
<App>{/* App content */}</App>
<ErrorBoundary
I tested the code, I observed that you can set initial value我测试了代码,我观察到你可以设置初始值
const [cats_matches, { mutate, refetch }] = createResource(web_orders, fetchCatsMatches, { initialValue: { name: "" } });
Now change your display code as below现在更改您的显示代码如下
<>
<button onClick={() => getCatsMatches()} >Go</button>
<p>{cats_matches().name}</p>
</>
Or you can also use Suspense
from these Examples Example1 , Example2 , Example3或者您也可以使用这些示例Example1 、 Example2 、 Example3 中的
Suspense
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.