Javascript TypeError:undefined不是对象（正在计算此.setState'；）

我是一个完全的初学者，我尝试使用textinput将项目添加到平面列表中。我经常遇到一个类型错误：undefined不是一个对象（评估“u 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>

    );
  }

import React，{useState，setState}来自“React”；
从“react native”导入{View、Text、StyleSheet、FlatList、Alert、TouchableOpacity、TextInput}；
导出默认函数FlatlistComponent（{}）{
常量数组=[{title:'ONE'}，{title:'TWO'}]；
常量[arrayHolder]=React.useState（[]）；
const[textInputHolder]=React.useState（“”）；
常量组件didmount=（）=>{
setState（{arrayHolder:[…array]}）
}
const joinData=（）=>{
push（{title:textInputHolder}）；
this.setState（{arrayHolder:[…array]}）；
}
常量FlatListItemSeparator=（）=>{
返回(
);
}
const GetItem=（item）=>{
警报。警报（项目）；
}
返回(
this.setState（{textInputHolder:data}）
style={style.textInputStyle}
“透明的”
/>
向平面列表添加值
index.toString（）}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={（{item}）=>{item.title}
/>
);
}

所以我看到您试图在这里使用功能组件。 状态变量可以这样重写

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

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

关于文本没有显示。您正在

onChangeText

事件中使用

this.setState

。它是一个功能组件，

此

在功能组件中不起作用。

状态

变量是使用功能组件中的

useState

钩子声明和设置的

您应该像这样重写onChangeText事件

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

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

setTextInputHolder（数据）}
style={style.textInputStyle}
“透明的”
/>

---

我认为这将解决您的问题

为了使用this.setState您必须使用类组件，在您的示例中，您使用的是一个函数组件，它使用挂钩来更改状态。您将基于类的组件和基于函数的组件混为一谈。

useState

hook也返回setter函数，而arrow函数没有自己的

this

。很乐意帮助：）您能帮我解决另一个问题吗？当我写入文本输入并按下按钮时，文本不会显示。只有空白。代码似乎在其他情况下工作，但输入的文本输入不可见，这不是由于样式：/I我已根据您的要求更新了答案。谢谢！文本现在可见，但我只能向列表中添加一项，如何添加更多@阿尔法93