方法调用后状态数组被清空答案

【问题标题】：State array gets emptied after a method call方法调用后状态数组被清空
【发布时间】：2019-05-18 16:47:45
【问题描述】：

我正在尝试对 React 状态数组执行过滤器。从渲染中我调用了搜索方法。

不知何故，状态数组从我调用的那一刻起就被清空了：

this.startSearch.bind(this)。

所以该方法不能使用状态数组，因为它完全是空的。

export default class ItemList extends Component {
  state = {
    itemList: []
  }

  startSearch(input) {
    console.log(this.state.itemList)
  }

  render() {
    //load Json
    let filteredArray = Data.filter(
      (item1) => {
        return
        item1.title.indexOf(this.state.searchInput.charAt(0).toUpperCase()) !== -1;
      }
    )
    this.setState({ itemList: filteredArray })

    return (
      <input type="text" id="inputField" value={this.state.searchInput} onInput={this.startSearch.bind(this)}></input>
    )
  }
}

知道我在这里错过了什么吗？

【问题讨论】：

你能分享更多来自组件的代码吗？
^^ 理想情况下，使用 minimal reproducible example 来更新您的问题，以展示问题，最好是使用 Stack Snippets（[<>] 工具栏按钮）的 runnable 问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
@DJYadav 我在问题中添加了更多代码。
您可以添加填充数组的部分还是 T.J.说，你的代码的可运行的sn-p，请？
代码有很多问题。 1）没有变量 Data 并且您在过滤器逻辑运行之前编写了 return 2）您没有在 render 方法中设置状态。 3）filteredArray 逻辑应该在输入元素的 onChange 或 onInput 处理程序中。请更正这些问题并编辑问题，以便我们为您提供帮助。

标签： javascript arrays reactjs bind

【解决方案1】：

this.startSearch 需要做 (e)=> this.setState({searchInput:e.target.value}) 但如果它是原生反应，我不认为 onInput 工作

【讨论】：