[英]Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode
Hi I am having some problems with a react project, I am working with hooks and I am getting a problem witha method passed as a prop to the hook.嗨,我在 React 项目中遇到了一些问题,我正在使用钩子,但我遇到了作为道具传递给钩子的方法的问题。 I am using materail ui as well, this is my code:我也在使用materail ui,这是我的代码:
import { Container, Grid, Select, MenuItem } from '@material-ui/core';
import React, { Component } from 'react';
import Store from '../component/store/store'
class StoreBuilder extends Component {
state = {
DivisionState: 'Store 1',
DivisionData: [
{
id: 1,
divDeptShrtDesc: 'Store 1'
},
{
id: 2,
divDeptShrtDesc: 'Store 2'
},
{
id: 3,
divDeptShrtDesc: 'Store 3'
}
]
};
handleChangeDivision(event) {
this.setState({ DivisionState: event.target.value });
}
renderDivisionOptions() {
return this.state.DivisionData.map((dt, i) => {
return (
<MenuItem
key={i}
value={dt.divDeptShrtDesc}>
{dt.divDeptShrtDesc}
</MenuItem>
);
});
}
render() {
return (
<div>
<Container >
<Grid >
<Store stores={this.state.DivisionState}
onChange={this.handleChangeDivision}
render ={this.renderDivisionOptions()}>
</Store>
</Grid>
</Container>
</div>
);
}
}
export default StoreBuilder;
The next is the hook code:接下来是钩子代码:
import { Container, Grid, Select, MenuItem } from '@material-ui/core';
import React, { Component } from 'react';
const store = (props) => {
return (
<div>
<Container >
<Grid >
<Select value={props.DivisionState}
onChange={props.handleChangeDivision}
>
{() =>props.render()}
</Select>
</Grid>
</Container>
</div>
);
}
export default store;
The issue is in the next code, I'm not pretty sure if it is possible to do the next code, I'm trying to pass the renderDivisionOptions method as a param to be used in the hook with the props:问题出在下一个代码中,我不太确定是否可以执行下一个代码,我正在尝试将 renderDivisionOptions 方法作为要在带有道具的挂钩中使用的参数传递:
{() =>props.render()}
You are passing a function {() =>props.render()}
to the <Select>
, but it seems that you need to call the function instead:您正在将函数{() =>props.render()}
传递给<Select>
,但似乎您需要调用该函数:
<Select value={props.DivisionState}
onChange={props.handleChangeDivision}
>
{props.render()}
</Select>
In addition, if the Select
element expects a ReactNode, you might need to wrap it with a fragment:此外,如果Select
元素需要一个 ReactNode,您可能需要用一个片段包装它:
<>{props.render()}</>
Since you pass renderDivisionOptions
as a callback to another component, it loses its context ( this
).由于您将renderDivisionOptions
作为回调传递给另一个组件,因此它会丢失其上下文 ( this
)。 You need to convert it to an arrow function, or bind it in the constructor.您需要将其转换为箭头函数,或者将其绑定在构造函数中。
renderDivisionOptions = () => {
return this.state.DivisionData.map((dt, i) => {
return (
<MenuItem
key={i}
value={dt.divDeptShrtDesc}>
{dt.divDeptShrtDesc}
</MenuItem>
);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.