提交句柄上状态更改的属性顺序

Question

我有这段代码，在本机反应的 ChangeText 上，我在状态项中插入多个字段值。出于某种原因，控制台日志中的输出显示字母顺序。由于逻辑是，在 ChangText 上，函数 EnterValue 将值插入项目状态。它找到属性名称，然后将其与文本值匹配，我认为在此过程中出现了问题。请看下面的代码

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Button, TextInput } from "react-native";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      step: 1,
      TotalItem: [],
      item: {
        Brand: null,
        Quantity: null,
        Instructions: null,
      },
    };
  }

  // remember this logig since take names, it adds property values in alphabetical order, and thus change the order
  EnterValue = (name) => {
    return (text) => {
      this.setState((prevState) => ({
        item: { ...prevState.item, [name]: text },
      }));
    };
  };

  submit = (e) => {
    e.preventDefault(e);

    const { step } = this.state;
    this.setState({
      step: step + 1,
    });

    this.setState(
      {
        TotalItem: [...this.state.TotalItem, this.state.item],
      },
      () => {
        console.log("updated state", this.state.TotalItem);
      }
    );
  };

  render() {
    return (
      <View style={{ flex: 1, margin: 20 }}>
        <TextInput
          placeholder="enter name"
          onChangeText={this.EnterValue("Brand")}
          style={{ borderWidth: 2, borderColor: "skyblue", margin: 20 }}
        />

        <TextInput
          placeholder="Quantity"
          onChangeText={this.EnterValue("Quantity")}
          style={{ borderWidth: 2, borderColor: "skyblue", margin: 20 }}
        />

        <TextInput
          placeholder="Instructions"
          onChangeText={this.EnterValue("Instructions")}
          style={{ borderWidth: 2, borderColor: "skyblue", margin: 20 }}
        />

        <View style={styles.container}>
          <View style={{ flex: 1 }}>
            <Button
              style={{ flex: 1, backgroundColor: "red" }}
              title="add"
              onPress={this.add}
            />
          </View>
          <View style={{ flex: 1 }}>
            <Button
              style={{ flex: 1, backgroundColor: "blue" }}
              title="submit"
              onPress={this.submit}
            />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

Answer 1

改变

onChangeText={this.EnterValue("Quantity")}
onChangeText={this.EnterValue("Brand")} 
onChangeText={this.EnterValue("Instructions ")} 

到

onChangeText={() => this.EnterValue("Quantity")}
onChangeText={() => this.EnterValue("Brand")} 
onChangeText={() => this.EnterValue("Instructions ")}