如何使用 state 将 class 组件重写为 function 组件

Question

我目前正在使用 React Native 开发应用程序。

我有一个使用 state 的 class 组件，并且想将其重写为 function 组件，以使用与之前的 ZCBBA2DZCAB21 组件相同的内容。

但是我不能重写它......当然，原始代码（类组件）效果很好

此试用应用程序有一个组件，该组件具有一个 TextInput 和两个按钮（添加和删除）。

当我按下添加按钮时，会出现一个新组件。 如果我按下相同组件消失的删除按钮。

我使用与组件索引相同的索引来控制 TextInput。

---

我无法解决的是在输入区域输入一些文本。

当我输入一些文本时，我只能输入几个文本并且输入区域视图不反映收集值......

当我将代码重写为 function 一时，如何解决此问题？

---

这是原始代码（类组件）：

    import React from "react";
    import { StyleSheet, View, Text, TextInput, Button } from "react-native";
    
    function Item({ text, handleInput, handleAdd, handleDelete, index }) {
      return (
        <View style={styles.list}>
          <Text>{index}</Text>
          <TextInput
            style={{ borderWidth: 1 }}
            value={text}
            onChangeText={(t) => {
              handleInput(index, t);
            }}
          />
          <Button
            title="ADD"
            onPress={() => {
              handleAdd();
            }}
          />
          <Button
            title="DELETE"
            onPress={() => {
              handleDelete(index);
            }}
          />
        </View>
      );
    }
    
    class RewriteClass extends React.Component {
      state = {
        texts: [""],
      };
    
      handleAdd = () => {
        const { texts } = this.state;
        this.setState({ texts: [...texts, ""] });
      };
    
      handleDelete = (index) => {
        const texts = [...this.state.texts];
        texts.splice(index, 1);
        this.setState({ texts: texts });
      };
    
      handleInput = (index, text) => {
        const { texts } = this.state;
        texts[index] = text;
        this.setState({ texts });
      };
    
      render() {
        const { texts } = this.state;
    
        return (
          <View>
            {texts.map((text, i) => (
              <Item
                key={"" + i}
                text={text}
                handleInput={this.handleInput}
                handleAdd={this.handleAdd}
                handleDelete={this.handleDelete}
                index={i}
              />
            ))}
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      list: {
        backgroundColor: "#ddd",
        margin: 10,
        padding: 10,
      },
    });
    
    export default RewriteClass;

这是我到目前为止尝试重写的代码（功能组件）：

import React, { useState } from "react";
import { StyleSheet, View, Text, TextInput, Button } from "react-native";

function Item({ text, handleInput, handleAdd, handleDelete, index }) {
  return (
    <View style={styles.list}>
      <Text>{index}</Text>
      <TextInput
        style={{ borderWidth: 1 }}
        value={text}
        onChangeText={(t) => {
          handleInput(index, t);
        }}
      />
      <Button
        title="ADD"
        onPress={() => {
          handleAdd();
        }}
      />
      <Button
        title="DELETE"
        onPress={() => {
          handleDelete(index);
        }}
      />
    </View>
  );
}

export default function RewriteFunction() {
  const [texts, setTexts] = useState([""]);

  //handleAdd = () => {
  const handleAdd = () => {
    setTexts((v) => {
      const ret = [...v, ""];
      return ret;
    });
  };

  //handleDelete = (index) => {
  const handleDelete = (index) => {
    setTexts((v) => {
      const ret = [...v];
      ret.splice(index, 1);
      return ret;
    });
  };

  //handleInput = (index, text) => {
  const handleInput = (index, text) => {
    setTexts((v) => {
      const ret = v;
      ret[index] = text;
      return ret;
    });
  };

  return (
    <View>
      {texts.map((text, i) => (
        <Item
          key={"" + i}
          text={text}
          handleInput={handleInput}
          handleAdd={handleAdd}
          handleDelete={handleDelete}
          index={i}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    backgroundColor: "#ddd",
    margin: 10,
    padding: 10,
  },
});

---

节点：12.18.3

反应原生：4.10.1

expo：3.22.3

---

Answer 1

问题是子组件没有更新。 我们必须为其分配专用的 state，它只是使用来自 props 的值进行初始化：

 import React, { useState } from "react"; import { StyleSheet, View, Text, TextInput, Button } from "react-native"; export function Item({ text, handleInput, handleAdd, handleDelete, index }) { const [inputValue, setInputValue] = React.useState(text); return ( <View style={styles.list}> <Text>{index}</Text> <TextInput style={{ borderWidth: 1 }} value={inputValue} onChangeText={(t) => { setInputValue(t); handleInput(index, t); }} /> <Button title="ADD" onPress={() => { handleAdd(); }} /> <Button title="DELETE" onPress={() => { handleDelete(index); }} /> </View> ); } export default function RewriteFunction() { const [texts, setTexts] = useState([""]); //handleAdd = () => { const handleAdd = () => { setTexts((v) => { const ret = [...v, ""]; return ret; }); }; //handleDelete = (index) => { const handleDelete = (index) => { setTexts((v) => { const ret = [...v]; ret.splice(index, 1); return ret; }); }; //handleInput = (index, text) => { const handleInput = (index, text) => { let t = texts; t[index] = text; setTexts(t); }; return ( <View> {texts.map((text, i) => ( <Item key={text + i.toString()} text={texts[i]} handleInput={handleInput} handleAdd={handleAdd} handleDelete={handleDelete} index={i} /> ))} </View> ); } const styles = StyleSheet.create({ list: { backgroundColor: "#ddd", margin: 10, padding: 10 } });