Reagieren Rahmen: TypeError: Rendern ist nicht eine Funktion

Ich versuche, Reagieren Kontext zu übergeben, eine Funktion, eine geschachtelte untergeordnete Komponente, die effektiv kann, das Kind zu aktualisieren, die Eltern sagen, wenn Sie gedrückt werden.

Das problem ist, dass ich zu sein scheinen immer ein Fehler ‚TypeError: Rendern ist nicht eine Funktion. (In der render(newValue), render ist eine Instanz des Array‘ und ein Fehler in meine Konsole liest: ‚Warnung: Ein Kontext-Verbraucher erbracht wurde mit mehreren Kinder, oder ein Kind, das ist nicht eine Funktion. Ein Kontext, der Verbraucher erwartet, dass ein einzelnes Kind, das ist eine Funktion. Wenn du bestanden hast-Funktion, stellen Sie sicher, es gibt keine abschließenden oder führenden Leerzeichen um ihn herum.‘

Ich geschaut habe, um zu diesem Fehler, und auch die Dokumentation, aber keine Antworten scheinen, um meine Frage zu beantworten, ich kann nicht ganz herausfinden, warum dies nicht funktioniert.

EDIT: ich sollte hinzufügen, dass es mehrere untergeordnete Komponenten dargestellt, wie Sie sind gebaut aus einem array von Objekten

Snippets:

Eltern:

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>

Innerhalb OptionTile ist das Kind ich würde gerne die Funktion nutzen, in:

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>
    )
};

Ist und der Kontext-Komponente ist einfach:

const IndexContext = React.createContext();

export default IndexContext;
  • <VariantTile> ist ein Kind <OptionTile>?
  • Könnten Sie eine minimale reproduzierbare Beispiel arbeiten? Es ist schwer zu füllen, um die fehlenden Stücke im moment.
  • VariantTile ist ein Kind VariantScreen, OptionTile navigiert zu der VariantScreen navigation stack
  • Klingt so, als wenn der Verbraucher sitzt nicht innerhalb der Anbieter-scope, daher nicht auf Sie zugreifen. Könnten Sie teilen sich die minimal-repository?
InformationsquelleAutor Adam Roberts | 2019-01-22



One Reply
  1. 18

    Als die Fehlermeldung angezeigt, die besagt, <Consumer> sollte das einzige Kind, und es sollte eine Funktion sein. Der Fehler wird angezeigt, wenn es mehrere Kinder, einschließlich text-Knoten.

    ; nach embedded-Ausdruck löst das problem. Sie ist nicht Teil eines Ausdrucks, und es zu einem Teil würde das Ergebnis der syntax-Fehler.

    Sollte es sein:

    <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>
    • Wow, so einfach ist das, vielen Dank für Ihre Hilfe!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.