为什么我不能输入我的 react-native SearchBar？

Question

当我输入时，搜索栏中没有显示任何内容，但它知道我正在输入（来自我的 updateSearch 函数中的打印语句）。根据我对 react-native searchBar 的理解，我什至不需要做任何事情来显示文本，所以我真的不知道我怎么可能搞砸了。这是一个更大项目的一部分.. 但我祈祷这个问题与它的其余部分没有任何关系。

import React, { Component } from "react";

import {

  View,

  Text,

  FlatList,

  ActivityIndicator,

  SafeAreaView,

  StyleSheet

} from "react-native";

import Header from "../components/Header";

import { SearchBar, List, ListItem } from 'react-native-elements';

export default class Search extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      query: "",

      data: []

    };

  }

  renderHeader = () => {

    return (

    <SearchBar

    placeholder="Type Here..."

    onChangeText={this.updateSearch}

    value={this.state.query}

    lightTheme={true}

    />

    );

  }

  updateSearch = text => {

    console.log("text", text);

    const formattedSearch = text.toLowerCase();

    this.setState({ query: formattedSearch });

    console.log("text", this.state.query);

  };

  render() {

    return (

      <SafeAreaView style={styles.container}>

        <Header text={"Search"} />

        <FlatList

          ListHeaderComponent={this.renderHeader}

        />

      </SafeAreaView>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    paddingTop: Expo.Constants.statusBarHeight

  }

});

Answer 1

如果你想用渲染更新你的 UI，你必须更新你的状态。在您的 FlatList 组件中，您不会更新状态。所以它永远不会再次渲染。您必须在 FlatList 中使用状态。render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <SafeAreaView style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; <Header text={"Search"} />&nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ListHeaderComponent={this.renderHeader}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; AnyProp={this.state.anyState}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </SafeAreaView>&nbsp; &nbsp; );&nbsp; }

Answer 2

问题出在ListHeaderComponent.我做了一个演示项目来看看发生了什么：import React, { Component } from 'react'import { SafeAreaView, FlatList, TextInput } from 'react-native'export default class Test extends Component {&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; super(props)&nbsp; &nbsp; &nbsp; &nbsp; this.state={value:""}&nbsp; &nbsp; }&nbsp; &nbsp; renderHeader = () =>{&nbsp; &nbsp; &nbsp; &nbsp; console.log("rendering")&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return (<TextInput style={{backgroundColor:"green"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>)&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.state.value) //Logs the value&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SafeAreaView style={{flex:1}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ListHeaderComponent={this.renderHeader}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SafeAreaView>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}看起来一旦组件渲染完毕，它就不再更新了。渲染中的日志确实会更新，但组件不会重新渲染自己（可能导致第一次渲染完成后FlatList不更新）ListHeaderComponent我建议将 SearchBar 移到 FlatList 上方，并将所有内容包含在ScrollView.编辑，为了确认它实际上正在更新，我创建了另一个TextInput并将它放在 FlatList 之外，它工作正常：import React, { Component } from 'react'import { SafeAreaView, FlatList, TextInput } from 'react-native'export default class Test extends Component {&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; super(props)&nbsp; &nbsp; &nbsp; &nbsp; this.state={value:""}&nbsp; &nbsp; }&nbsp; &nbsp; renderHeader = () =>{&nbsp; &nbsp; &nbsp; &nbsp; console.log("rendering")&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return (<TextInput style={{backgroundColor:"green"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>)&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.state.value) //Logs the value&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SafeAreaView style={{flex:1}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextInput style={{backgroundColor:"red"}}value={this.state.value} placeholder={"Placeholder"}onChangeText={(text)=> this.setState({value : text})}></TextInput>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ListHeaderComponent={this.renderHeader}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SafeAreaView>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}