反应上下文:TypeError:渲染不是函数 [英] React Context: TypeError: render is not a function
问题描述
我正在尝试使用React Context将函数传递给嵌套的子组件,这样可以有效地使孩子在按下时更新父状态.
I'm trying to use React Context to pass a function to a nested child component, which effectively allows the child to update the parents state when pressed.
问题是我似乎收到错误'TypeError:render不是函数.(在render(newValue)中,render是Array的一个实例.,并且控制台中的错误显示为:警告:上下文使用者使用多个子对象或不是功能的子对象进行渲染)上下文使用者需要一个作为功能的子代.如果您确实传递了一个功能,请确保该功能周围没有尾随或前导空格.'
The problem is I seem to be getting an error 'TypeError: render is not a function. (In render(newValue), render is an instance of Array' and an error in my console reads: 'Warning: A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it.'
我已经查看了这个错误以及文档,但是似乎没有答案可以回答我的问题,我无法弄清楚为什么它不起作用.
I've looked around at this error and also at documentation but no answers seem to answer my question, I can't quite work out why this isn't working.
编辑:我应该补充一点,因为它们是根据对象数组构建的,因此呈现了多个子组件
I should add that there are multiple child components rendered, as they're built from an array of objects
摘要:
父母:
class Product extends Component {
state = {
selected_ind: 0
};
handleContextChange = selected_ind => {
this.setState({selected_ind});
};
render() {
const contextValue = {
data: this.state,
handleChange: this.handleContextChange
};
//Desconstruct props for ease of use
const {
attr_data,
variant,
product_name } = this.props;
return (
<Container>
<Heading>Product Options</Heading>
<IndexContext.Provider value={contextValue}>
<OptionTile
tileColor='grey'
onPress={ () => this.props.navigation.navigate('Variants', {
attr_data: attr_data,
selected_ind: this.state.selected_ind
})} //Replace with named function
option="Variant"
selected_ind={ this.state.selected_ind }
value={ selected_attr.name } />
</IndexContext.Provider>
<OptionTile
tileColor='grey'
option="Quantity"
value="1" />
</Container>
在OptionTile中是我要在其中使用该功能的孩子:
Within OptionTile is the child I'd like to use the function within:
const VariantTile = (props) => {
return (
<IndexContext.Consumer>
{({ handleChange }) => (
<TouchableOpacity onPress={handleChange(props.index)}>
<AsyncImage
source={ props.img_src }
placeholderColor="#fafafa"
style={{ flex: 1, width: null, height: 200 }}
/>
<Text>{ props.var_name }</Text>
<Text>{ props.price }</Text>
<Text>{ props.sku }</Text>
</TouchableOpacity>
)};
</IndexContext.Consumer>
)
};
上下文组件很简单:
const IndexContext = React.createContext();
export default IndexContext;
推荐答案
由于错误状态,< Consumer>
应该是唯一的孩子,并且应该是一个函数.当它有多个子节点(包括文本节点)时,会出现该错误.
As the error states, <Consumer>
should have the only child, and it should be a function. The error appears when it has multiple children, including text nodes.
;
会导致问题.它不是表达式的一部分,使其成为表达式的一部分会导致语法错误.
;
after embedded expression causes the problem. It's not a part of an expression, and making it a part of it would result in syntax error.
应该是:
<IndexContext.Consumer>
{({ handleChange }) => (
<TouchableOpacity onPress={handleChange(props.index)}>
<AsyncImage
source={ props.img_src }
placeholderColor="#fafafa"
style={{ flex: 1, width: null, height: 200 }}
/>
<Text>{ props.var_name }</Text>
<Text>{ props.price }</Text>
<Text>{ props.sku }</Text>
</TouchableOpacity>
)}
</IndexContext.Consumer>
这篇关于反应上下文:TypeError:渲染不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!