Question

我正在尝试使用React Context将函数传递给嵌套的子组件，这样可以有效地使子项在被按下时更新父状态。

问题是我似乎收到错误'TypeError：render不是函数。（在render（newValue）中，render是Array的一个实例。，控制台中的错误显示为：“警告：上下文使用者使用多个子对象或不是函数的子对象进行渲染）。上下文使用者希望有一个作为函数的子代。如果您确实传递了一个函数，请确保该函数周围没有尾随或前导空格。'

我已经查看了这个错误以及文档，但是似乎没有答案可以回答我的问题，我无法弄清楚为什么它不起作用。

编辑：我应该补充一点，因为它们是根据对象数组构建的，因此呈现了多个子组件

摘要：

父母：

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中是我要在其中使用该功能的孩子：

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;

Answer 1

由于错误状态，<Consumer>应该是唯一的孩子，并且应该是一个函数。当它有多个子节点（包括文本节点）时，会出现该错误。

嵌入表达式后的

;会导致问题。它不是表达式的一部分，而使其成为表达式的一部分会导致语法错误。

应该是：

<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：渲染不是函数

1 个答案: