在 React Native 中向状态插入数据

Question

我有一个列表数据和一个用于添加数据的输入类型，所以我为保存数据和渲染它创建了状态。我希望当我在 TextInput 中键入文本时输入，以便添加数据。但是对于这个问题，必须刷新屏幕才能添加数据。

const [dataSubjects, setDataSubject] = useState([
    {
      id: "PPKN",
      name: "Pendidikan Pancasila dan Kewarganegaraan (PPKn)",
    },
    {
      id: "BI",
      name: "Bahasa Indonesia (BI)",
    },
    {
      id: "MAT",
      name: "Matematika (MAT)",
    },
    {
      id: "IPA",
      name: "Ilmu Pengetahuan Alam (IPA)",
    },
    {
      id: "IPS",
      name: "Ilmu Pengetahuan Sosial (IPS)",
    },
    {
      id: "SBDP",
      name: "Seni Budaya dan Prakarya (SBdP)",
    },
    {
      id: "PJOK",
      name: "Pendidikan Jasmani, Olahraga, dan Kesehatan (PJOK)",
    },
  ])

const HandleSubmit = (name) => {
    setText("")
    setDataSubject((prevSubject) => {
      return [{ name, id: Math.random().toString() }, ...prevSubject]
    })
  }

这是状态数据和函数添加数据的代码

<TextInput
                    visible={inputSubject}
                    mode="outlined"
                    placeholder="Type other subject…"
                    underlineColor="transparent"
                    value={text}
                    style={{
                      backgroundColor: theme.colors.surface,
                      fontSize: 14,
                      borderRadius: 4,
                      flex: 1,
                    }}
                    onChangeText={handleChangeText}
                    onSubmitEditing={() => HandleSubmit(text)}
                  />

这是一个 TextInput 代码

Answer 1

您是否正在尝试将您在 <TextInput/> 中键入的任何内容添加为 dataSubjects 中的新项目？如果您是，则可以使用以下两者之一将项目添加到数组：

Array.prototype.unshift() 在数组的开头添加一个项目
Array.prototype.push() 在数组末尾添加一个项目

具体来说，你可以这样尝试：

const HandleSubmit = (name) => {
    setText("")
    setDataSubject(dataSubjects.unshift({name: name, id: Math.random().toString()})
  }

在 React Native 中向状态插入数据

Insert Data to State in React Native

state

insert

react-native