Question

我是React Native的完整入门者，我正在尝试使用textinput将项目添加到平面列表中。我一直在不断收到TypeError：undefined不是对象（正在评估'_this.setState'）。我已经多次编辑该代码，并试图研究我可以做的事情，但是它仍然无法正常工作。有人可以帮助我，告诉我我需要改变吗？下面是我的代码。预先谢谢你！

import React, { useState, setState } from 'react';
import { View, Text, StyleSheet, FlatList, Alert, TouchableOpacity, TextInput } from 'react-native';

export default function FlatlistComponent({ }) {

    const array = [{title: 'ONE'}, {title: 'TWO'}];
    const [arrayHolder] = React.useState([]);
    const [textInputHolder] = React.useState('');

    const componentDidMount = () => {
        setState({ arrayHolder: [...array] })
    }

    const joinData = () => {
        array.push({ title : textInputHolder });
        this.setState({ arrayHolder: [...array] });
    }

    const FlatListItemSeparator = () => {
        return (
            <View
                style={{
                height: 1,
                width: "100%",
                backgroundColor: "#607D8B",
                }} />
        );
    }

    const GetItem = (item) => {
        Alert.alert(item);
    }


    return (

      <View style={styles.MainContainer}>
        <TextInput
          placeholder="Enter Value Here"
          onChangeText={data => this.setState({ textInputHolder: data })}
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
        />

        <TouchableOpacity onPress={joinData} activeOpacity={0.7} style={styles.button} >
          <Text style={styles.buttonText}> Add Values To FlatList </Text>
        </TouchableOpacity>

        <FlatList
          data={arrayHolder}
          width='100%'
          extraData={arrayHolder}
          keyExtractor={(index) => index.toString()}
          ItemSeparatorComponent={FlatListItemSeparator}
          renderItem={({ item }) => <Text style={styles.item} onPress={GetItem.bind(this, item.title)} > {item.title} </Text>}
        />
      </View>

    );
  }

Answer 1

因此，我看到您正在尝试在此处使用功能组件。状态变量可以这样重写

const [arrayHolder, setArrayHolder] = useState([]);
const [textInputHolder, setTextInputHolder] = useState('');

componentDidMount用于类组件，并且可以像这样针对功能组件进行重写

import React, { useState, useEffect } from 'react';
useEffect(()=>{
  setArrayHolder(array)
}, [])

函数joinData可以这样重写。

const joinData = () => {
        array.push({ title : textInputHolder });
        setArrayHolder(array)
    }

关于未显示的文字。您在this.setState事件中使用onChangeText。它是一个功能组件，this在功能组件中不起作用。state变量是使用功能组件中的useState钩子声明和设置的。

您应该这样重写onChangeText事件。

<TextInput
    placeholder="Enter Value Here"
    onChangeText={data => setTextInputHolder(data)}
    style={styles.textInputStyle}
    underlineColorAndroid='transparent'
/>

我认为这可以解决您的问题

TypeError：undefined不是对象（正在评估'_this.setState'）

1 个答案: