Question

我一直在试图理解为什么将数据从scrollview项传递到回调函数时，父组件收到未定义的原因。我的item组件中有一个console.log，它记录了正确的值，但是父组件中的日志记录了undefined ... remove组件也成功删除了该组件，但是，该日志中函数也会返回未定义的...此时，我不确定是我使用的模块还是react-natives scrollView ... 感谢您的任何帮助。

孩子，项目组件

render() {
        const {data, active } = this.props;
        const key = data.key;
        console.log(key);
        return (
            <Animated.View style={[
                styles.row,
                this._style,
            ]}>
                <Text style={styles.text}>{data.role}</Text>
                <Text style={styles.nameText}>{data.name}</Text>
                <TouchableOpacity onPress={() => {this.props.onRemove(key)}}>
                    <Text>X</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {this.props.modalTwo(key)}}>
                    <Text>  E</Text>
                </TouchableOpacity>
            </Animated.View>
        );
    }

父组件的功能和渲染方法

_renderRow = ({data, active}) =>{
        return <Role data={data} onRemove={() => {this.removeItem()}} modalTwo={() =>{this.openModalTwo()}}/>
    }

 removeItem = (key) => {
    const newRoleList = this.state.roleList.slice();
    console.log(key);
    const roleIndex = newRoleList.findIndex(item => item.key === key);
    console.log(key);
    newRoleList.splice(roleIndex,1);
    this.setState( {roleList: newRoleList});
}

openModalTwo = (key) => {
    console.log(key);
    const newObjectArray = this.state.roleList.slice();
    console.log('newObjectArray: ',newObjectArray);
    const editObject = newObjectArray.find(item => item.key === key );
    console.log('editObject:',editObject);
    this.setState({modalVisibleTwo:!this.state.modalVisibleTwo, editObject: editObject});
}

render(){
    reindex = (indexes, sourceArray) => indexes.map(i => sourceArray[i]); 
    return(
        <KeyboardAvoidingView
            behavior="padding"
            style={styles.listContainer}
        > 
            <Modal
                isVisible = {this.state.modalVisible}
                onSwipe = {() => {this.setState({modalVisible: !this.state.modalVisible})}}
                swipeDirection="right"
            >
                <View style={styles.modalContainer}>
                    <View style={styles.textInputContainer}>
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Role'}
                            underlineColorAndroid={'#ffffff'}
                            onChangeText={(text) => this.updateTextInput('role',text)}
                        />
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Name'}
                            underlineColorAndroid={'#ffffff'}
                            onChangeText={(text) => this.updateTextInput('name',text)}
                        />
                    </View>
                    <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.state.nameInput && this.state.roleInput != '' ? this.addAnotherRole() : this.reset();}}>
                            <Text style={styles.buttonText}>{this.state.nameInput && this.state.roleInput != '' ? 'Update' : 'Close'}</Text>
                    </TouchableOpacity>
                </View>
            </Modal>
            <Modal
                isVisible = {this.state.modalVisibleTwo}
                onSwipe = {() => {this.setState({modalVisibleTwo: !this.state.modalVisibleTwo})}}
                swipeDirection="right"
            >
                <View style={styles.modalContainer}>
                    <View style={styles.textInputContainer}>
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Role'}
                            underlineColorAndroid={'#ffffff'}
                            // value={this.state.editObject.role}
                            onChangeText={(text) => this.updateTextInput('role',text)}
                        />
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Name'}
                            underlineColorAndroid={'#ffffff'}
                            // value={this.state.editObject.name}
                            onChangeText={(text) => this.updateTextInput('name',text)}
                        />
                    </View>
                    <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.state.nameInput && this.state.roleInput != '' ? this.addAnotherRole() : this.reset();}}>
                            <Text style={styles.buttonText}>{this.state.nameInput && this.state.roleInput != '' ? 'Update' : 'Close'}</Text>
                    </TouchableOpacity>
                </View>
            </Modal>
            <Text style={styles.taskTitle}>Company Roles</Text>
            <Text style={styles.introBlurb}>Paragraph On how to use this component</Text>
            <View style={styles.titleContainer}>
                <Text style={styles.title}>Title</Text>
                <Text style={styles.title}>Name</Text>
            </View>
            <SortableList
                style={styles.List}
                data={this.state.roleList}
                renderRow={this._renderRow}
                // onChangeOrder ={(nextOrder) => {this.setState({ roleList: reindex(nextOrder, this.state.roleList)})}}
            />
            <TouchableOpacity style={styles.addButton} onPress={() =>{this.setState({modalVisible: !this.state.modalVisible})}}>
                <Text style={styles.addText}>Add another role</Text>
            </TouchableOpacity>
        </KeyboardAvoidingView>
    );
}

}

我正在使用的模块：https://www.npmjs.com/package/react-native-sortable-list

Answer 1

您没有在_renderRow中传递用于回调道具的参数。例如，

onRemove={() => {this.removeItem()}}

应该是：

onRemove={(key) => {this.removeItem(key)}}

或者只是：

onRemove={this.removeItem}

传递给父级的ScrollView项数据以未定义状态返回

1 个答案: