Reactjs 如何使用状态将类组件重写为函数组件

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

我有一个使用state的类组件，并希望将其重写为函数组件，以处理与前一个类组件相同的内容

但是我不能重写它…当然，原始代码（类组件）工作得很好

此试用应用程序有一个组件，该组件有一个文本输入和两个按钮（添加和删除）

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

我用索引控制TextInput，该索引与组件的索引相同

---

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

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

当我将代码重写为function one时，如何解决这个问题

---

以下是原始代码（类组件）：

从“React”导入React；
从“react native”导入{样式表、视图、文本、文本输入、按钮}；
函数项（{text，handleInput，handleId，handleDelete，index}）{
返回(
{index}
{
handleInput（指数，t）；
}}
/>
{
手感d（）；
}}
/>
{
handledelet（索引）；
}}
/>
);
}
类重写类扩展了React.Component{
状态={
文本：['']，
};
handleAdd=（）=>{
const{text}=this.state；
this.setState（{text:[…text，“]}）；
};
handleDelete=（索引）=>{
const text=[…this.state.text]；
文本拼接（索引，1）；
this.setState（{text:text}）；
};
handleInput=（索引，文本）=>{
const{text}=this.state；
文本[索引]=文本；
this.setState（{text}）；
};
render（）{
const{text}=this.state；
返回(
{text.map（（text，i）=>(
))}
);
}
}
const styles=StyleSheet.create({
名单：{
背景颜色：“ddd”，
差额：10，
填充：10，
},
});
导出默认重写类；

以下是迄今为止我尝试重写的代码（函数组件）：

import React，{useState}来自“React”；
从“react native”导入{样式表、视图、文本、文本输入、按钮}；
函数项（{text，handleInput，handleId，handleDelete，index}）{
返回(
{index}
{
handleInput（指数，t）；
}}
/>
{
手感d（）；
}}
/>
{
handledelet（索引）；
}}
/>
);
}
导出默认函数重写函数（）{
const[text，setTexts]=useState（[“”]）；
//handleAdd=（）=>{
常数handleAdd=（）=>{
setTexts（（v）=>{
常量ret=[…v，“”]；
返回ret；
});
};
//handleDelete=（索引）=>{
常量handleDelete=（索引）=>{
setTexts（（v）=>{
常数ret=[…v]；
重新拼接（索引1）；
返回ret；
});
};
//handleInput=（索引，文本）=>{
常量handleInput=（索引，文本）=>{
setTexts（（v）=>{
常数ret=v；
ret[索引]=文本；
返回ret；
});
};
返回(
{text.map（（text，i）=>(
))}
);
}
const styles=StyleSheet.create({
名单：{
背景颜色：“ddd”，
差额：10，
填充：10，
},
});

---

节点：12.18.3

反应：4.10.1

世博会：3.22.3

---

---

问题在于子组件未更新。我们必须为其分配专用状态，该状态仅使用来自props的值进行初始化：

import React，{useState}来自“React”；
从“react native”导入{样式表、视图、文本、文本输入、按钮}；
导出函数项（{text，handleInput，handleId，handleDelete，index}）{
常量[inputValue，setInputValue]=React.useState（文本）；
返回(
{index}
{
设置输入值（t）；
handleInput（指数，t）；
}}
/>
{
手感d（）；
}}
/>
{
handledelet（索引）；
}}
/>
);
}
导出默认函数重写函数（）{
const[text，setTexts]=useState（[“”]）；
//handleAdd=（）=>{
常数handleAdd=（）=>{
setTexts（（v）=>{
常量ret=[…v，“”]；
返回ret；
});
};
//handleDelete=（索引）=>{
常量handleDelete=（索引）=>{
setTexts（（v）=>{
常数ret=[…v]；
重新拼接（索引1）；
返回ret；
});
};
//handleInput=（索引，文本）=>{
常量handleInput=（索引，文本）=>{
设t=文本；
t[索引]=文本；
setTexts（t）；
};
返回(
{text.map（（text，i）=>(
))}
);
}
const styles=StyleSheet.create({
名单：{
背景颜色：“ddd”，
差额：10，
填充：10
}
})；

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

import React，{useState}来自“React”；
从“react native”导入{样式表、视图、文本、文本输入、按钮}；
导出函数项（{text，handleInput，handleId，handleDelete，index}）{
常量[inputValue，setInputValue]=React.useState（文本）；
返回(
{index}
{
设置输入值（t）；
handleInput（指数，t）；
}}
/>
{
手感d（）；
}}
/>
{
handledelet（索引）；
}}
/>
);
}
导出默认函数重写函数（）{
const[text，setTexts]=useState（[“”]）；
//手工=
    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,
  },
});