[英]React , Error: Objects are not valid as a React child (found: object with keys {data})
When I tried to pass a number as argument to function inside JSX the above error occured.当我尝试将数字作为参数传递给 JSX 内的 function 时,发生了上述错误。
Working file Link: https://codesandbox.io/s/divine-hill-v3gl3?fontsize=14&hidenavigation=1&theme=dark&file=/new.js工作文件链接: https://codesandbox.io/s/divine-hill-v3gl3?fontsize=14&hidenavigation=1&theme=dark&file=/new.js
React Component.反应组件。
function Rating(data) {
// This function indent to display number 0 to 3 based on 'data';
switch (data) {
case data <= 0: {
return <div>0</div>;
}
case 0 < data <= 1: {
return <div>1</div>;
}
case 1 < data <= 2: {
return <div>2</div>;
}
case 2 < data <= 3: {
return <div>3</div>;
}
default:
return data;
}
}
function some() {
return (
<div>
<Rating data={product.totalrating} />
</div>
);
}
export default some;
You are using the prop object instead the actual data:您正在使用道具 object 代替实际数据:
// not Rating(data),
// as the argument of function component is a prop object
function Rating({data}) {
//...
return data;
}
The problem you get is here:你遇到的问题在这里:
function Rating(data) {
In a component you are receiving PROPS so you are getting an object like this:在您收到 PROPS 的组件中,您将获得这样的 object:
data: {
data: 1
}
In your code you are comparing with the object so you get the default case in the switch, returning the object above.在您的代码中,您正在与 object 进行比较,因此您在开关中获得默认情况,返回上面的 object。
to fix it you can do:要修复它,您可以执行以下操作:
function Rating({data}) {
or或者
function Rating(props) {
and use props.data for your comparations.并使用 props.data 进行比较。
When you pass props to the component, you receive them as object.当你将 props 传递给组件时,你会收到 object。 If you pass
如果你通过
<Rating data={data} />
then you receive props in a Rating component like { data: YOUR DATA }然后你会在像 { data: YOUR DATA } 这样的 Rating 组件中收到道具
Link to working sandbox https://codesandbox.io/s/fancy-smoke-wl8he链接到工作沙箱https://codesandbox.io/s/fancy-smoke-wl8he
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.