React Native箭头函数顺序执行双函数 待办添加后输入框清空失效

核心问题 #

你的TextInput组件没有绑定value属性，属于非受控组件，输入框的显示内容不会和你声明的text状态同步，所以即使调用setText("")修改了状态，输入框的展示也不会更新。

修复方案 #

1. 给addTodo.js中的TextInput组件添加value={text}属性，将其转为受控组件，让输入内容和text状态完全绑定：

// 修改后的AddTodo组件
const AddTodo = ({ submitHandler }) => {
  const [text, setText] = useState("");
  const changeHandler = (value) => {
    setText(value);
  };

  return (
    <View>
      <TextInput
        style={styles.input}
        placeholder="new todo..."
        onChangeText={changeHandler}
        value={text} // 新增这一行绑定状态
      />
      <Button
        title="Add Todo"
        onPress={() => {
          submitHandler(text);
          setText("");
        }}
      />
    </View>
  );
};
export default AddTodo;

2. （可选优化）如果希望输入内容长度不足3触发提示时不清空输入框，可以调整逻辑如下：
   首先修改App.js里的submitHandler，添加返回值标识是否添加成功：

const submitHandler = (text) => {
  if (text.length > 3) {
    const todoItem = { id: todo.length + 1, text };
    setTodo((prevTodo) => [...prevTodo, todoItem]);
    return true; // 添加成功返回true
  } else {
    Alert.alert("OOPS!", "todos must be of length minimum 3 character...", [
      { text: "understood", onPress: () => console.log("Alert Pressed") },
    ]);
    return false; // 添加失败返回false
  }
};

再修改addTodo.js的按钮点击逻辑，只有添加成功才清空输入：

<Button
  title="Add Todo"
  onPress={() => {
    const isAddSuccess = submitHandler(text);
    if (isAddSuccess) {
      setText("");
    }
  }}
/>

内容的提问来源于stack exchange，提问作者kichu