Question

对不起我的问题。我搜索了很多像这样的问题，但其中任何一个都不适合我。

我是React-native的新手。我为我的项目使用了2个组件，在这两个组件中我使用了redux connect()函数。 connect（）在Main.js中正常工作。但在Todos.js我收到了一个错误。我尝试了许多解决方案，如不同类型的导入/导出但尚未工作。

不变违规：元素类型无效：预期为字符串（for   内置组件）或类/函数（用于复合组件）   但得到了：未定义。您可能忘记从中导出组件   它定义的文件，或者你可能混淆了默认和命名   进口。

检查Main。
的渲染方法

Main.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar, TextInput, ScrollView, TochableOpacity } from 'react-native';
import {Provider} from 'react-redux';
import {Todos} from './Todos';
import {connect} from 'react-redux';
import {addTodo} from '../actions';


class Main extends Component {
    constructor(props) {
        super(props);
        this.addNewTodo = this.addNewTodo.bind(this); // Here is the key
        this.state = {
            newTodoText: ""
        };
    }

    addNewTodo(){
        var {newTodoText} = this.state;
        console.log(newTodoText);
        if (newTodoText && newTodoText != "") {
            this.setState({
                newTodoText: ""
            })
            this.props.dispatch(addTodo(newTodoText));
        }
    }
    render() {
        var renderTodos = () => {
            if (this.props.todos) {
                return this.props.todos.map((todo) => {
                    return (
                        <Todos text={todo.text} key={todo.id} id={todo.id}/>
                    );
                });
            }
        }
        return (

            <View style={styles.container}>
                <StatusBar barStyle="light-content"></StatusBar>
                <View style={styles.topBar}>
                    <Text style={styles.title}>
                        ToDo List
                    </Text>
                </View>
                <View style={styles.inputContainer}>
                    <TextInput
                        onChangeText={(text) => this.setState({newTodoText:text})}
                        value={this.state.newTodoText}
                        returnKeyType="done"
                        placeholder="New ToDo"
                        onSubmitEditing={this.addNewTodo}
                        underlineColorAndroid="transparent"
                        style={styles.input}
                        >

                    </TextInput>
                </View>
                <ScrollView automaticallyAdjustContentInsets={false}>
                    {renderTodos()}
                </ScrollView>
            </View>
        );
    }
}


...

var mapStateToProps = (state) => {
    return {
        todos: state.todos
    };
}
export default connect (mapStateToProps)(Main);

ToDos.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar, TextInput, ScrollView,TochableOpacity } from 'react-native';
import {Provider} from 'react-redux';
import {connect} from 'react-redux';
import {deleteTodo} from '../actions';

class Todos extends Component {
    deleteSelf() {
        this.props.dispatch(deleteTodo(this.props.id))
    }

    render(){
        return (
            <TochableOpacity onPress={this.deleteSelf} >
                <View style={styles.todoContainer}>
                    <Text style={styles.todoText}>
                        {this.props.text}
                    </Text>
                </View>
            </TochableOpacity>
        );
    }
};

export default connect()(Todos);

注意

虽然我没有添加redux connect但我没有任何问题。

Answer 1

除了renderTodos之外，一切似乎都很好我不确定究竟是什么问题，但您可以尝试一下。在render函数外部定义renderTodo，当条件不符合时返回null。

  - id: "stringScheme"
    className: "org.apache.storm.kafka.StringScheme"

  - id: "stringMultiScheme"
    className: "org.apache.storm.spout.SchemeAsMultiScheme"
    constructorArgs:
      - ref: "stringScheme"

  - id: "zkHosts"
    className: "org.apache.storm.kafka.ZkHosts"
    constructorArgs:
      - "172.25.33.191:2181"

  - id: "spoutConfig"
    className: "org.apache.storm.kafka.SpoutConfig"
    constructorArgs:
      - ref: "zkHosts"
      - "blockdata"
      - ""
      - "myId"
    properties:
      - name: "scheme"
        ref: "stringMultiScheme"

      - name: "ignoreZkOffsets"
        value: true

      - name: "startOffsetTime"
        ref: "XXXXXXXXX"

不变违规：使用react-redux，元素类型无效

1 个答案: