Question

我为我的应用创建了小型搜索功能，但似乎无法正常工作。

首先，我创建了一个构造器，其中CurrencyDisplay包含要显示的列表数组

constructor() {
        super() 
        this.CurrencyDisplay = CurrencyDisplay
    }

我正在映射它并像这样调用

{ this.CurrencyDisplay.map(data => {
                  return (
                  <TouchableOpacity>
                     <Text  style={dataLong}> {data["long"]}</Text>
                     <Text  style={dataShort}>{data["short"]}</Text>
                 </TouchableOpacity>)})}

然后我有输入元素，用户应该在其中进行搜索

<TextInput
   style={textInput}
   placeholder="Search Currnecy"
   onChangeText={(text) => this.onSearch(text)} />

我的onSearch看起来像这样

onSearch = (text) => {
        if (text = "") {
         this.CurrencyDisplay = []
         this.CurrencyDisplay = CurrencyDisplay
          this.setState({searchCurrency: false})
        } else {     
          if (!this.state.searchCurrency) {
           this.setState({searchCurrency: true}) 
           }
         this.CurrencyDisplay = []
         for (let i=0; i<CurrencyDisplay.length; i++) {
          let currencyVal = CurrencyDisplay[i]["short"]
          if (currencyVal.indexOf(text) > - 1) {
            this.CurrencyDisplay.push({
             no: {i},
             short: CurrencyDisplay[i]["short"],
             long: CurrencyDisplay[i]["long"] 
            })
            console.log(this.CurrencyDisplay)
          }
        }
      }
    }

在上述通知console.log(this.CurrencyDisplay)中这会将所有内容逐步添加到数组

CurrencySelection.js:60 [{…}]

CurrencySelection.js:60 (2) [{…}, {…}]

CurrencySelection.js:60 (3) [{…}, {…}, {…}]

CurrencySelection.js:60 (4) [{…}, {…}, {…}, {…}]

CurrencySelection.js:60 (5) [{…}, {…}, {…}, {…}, {…}]

谁能告诉我我在做什么错？

Answer 1

如果状态发生任何变化，列表将在渲染时更新。如果将结果放在全局数组上，则不会触发render（）。最好的选择是将结果存储在组件状态。

在搜索中：

this.setState({ CurrencyDisplay: mylist })

渲染时：

{ this.state.CurrencyDisplay.map(data => {
    return (
        <TouchableOpacity>
            <Text  style={dataLong}> {data["long"]}</Text>
            <Text  style={dataShort}>{data["short"]}</Text>
        </TouchableOpacity>
    )
})}

Answer 2

这里有一个相等的标记。应该是两个或三个。一个等号仅声明一个值为text的新""变量。

onSearch = (text) => {
    if (text = "") {

将其更改为：

onSearch = (text) => {
    if (text === "") {

然后，要渲染数组，您应该使用状态。如果不使用，则过滤后不会重新呈现在屏幕上。

无法执行搜索

2 个答案: