onChangeText setState仅设置一个字符，而不是整个字符串

Question

我接受从搜索栏输入的文本并将setState设置为text，但是一次只能输入一个字符，我如何继续更新并添加到状态中而不是替换状态中的内容？我觉得这是预期的操作，但是我的代码没有这样做。

class FindRecipesScreen extends Component {
  static navigationOptions = {
    title: "Find Recipes",
    header: null
  };
  constructor(props) {
    super(props);
    this.state = {
      search: "",
      recipe: "",
      text: "",
    };
  }
  backToHomePage = () => {
    this.props.navigation.navigate("Home");
  };
  componentDidMount() {
    this.props.getRecipeList(this.props.auth.jwt);
  }
  handleSearch = text => {
    console.log("text", text);
    this.setState({text: text});
  };
  render() {
    return (
      <View style={styles.recipe}>
        <View style={styles.recipeBar}>
          <ActionNavbar title="Find Recipes"
                        leftAction={this.backToHomePage}
                        leftIcon={require("app/assets/icons/cancel.png")}
                        rightAction={this.backToHomePage}
                        rightIcon={require("app/assets/icons/filter.png")}/>

        </View>
        <View>
          <View>
            <SearchBar
              containerStyle={styles.searchContainer}
              inputContainerStyle={styles.searchInputContainer}
              inputStyle={styles.searchInput}
              lightTheme
              searchIcon={searchIcon}
              round
              onChangeText={this.handleSearch}
              placeholder="Search Cookbooks"
            />
            <View style={styles.forward}>
              <Image
                style={styles.forwardIcon}
                width={18}
                height={18}
                source={require("app/assets/icons/forward.png")}
              />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

 

Answer 1

在range函数中使用防抖动器，以便在防抖动时间之后设置状态。

Answer 2

我找到了解决方案...渲染后但在与搜索者返回之前，我需要const { search } = this.state;