Question

我有一个外部文件，其中声明了要导入的全局变量。

BOQSuggestions.js

var BOQSuggestions = []

export default BOQSuggestions;

我正在这样导入 TasksInsert.jsx 中的全局变量：

import BOQSuggestions from './BOQSuggestions';

在我的return函数的render()部分中，我具有以下代码：

return (
      <Wrapper>
      <Title>Insert a Task</Title>
       <Label>Description: </Label>
       <InputText
          type="text"
          placeholder="Search for tasks in the BOQ..."
          value={ taskName }
          onChange={this.handleChangeInputTaskName}
        />
       <h1>{BOQSuggestions.length}</h1>
       ...

我的 handleChangeInputTaskName 函数如下：

handleChangeInputTaskName = async event => {
   var taskName = event.target.value

   if(taskName.charAt(taskName.length -1) == ' '){
      api.autoCompleteBOQ(taskName).then(res => {
        var autoresultArray = res.data.data.hits.hits
        var autoResult = []

        for(var i = 0; i < autoresultArray.length; i++){
          autoResult = (JSON.stringify(autoresultArray[i]._source.boqList))             
         BOQSuggestions.push(JSON.stringify(autoresultArray[i]._source.boqList))
       }

      console.log('Length of the suggestions array ====> ', BOQSuggestions.length )

      }).catch(error => {        
      console.log('Some error got while performing autocomplete ')
      })      
     }
      this.setState({taskName})    
   }

我在BOQSuggestions.length函数中得到了正确的handleChangeInputTaskName值，但是在return函数中，长度值始终保持为零。

由于已将其作为全局变量导入，因此我是否仍可以维护此变量的状态？我不想为此使用Redux或任何其他库，因为这是我唯一需要状态保持一致的地方。

我对React和Javascript都比较陌生。请帮我在这里。谢谢！

Answer 1

您好，我认为在您的方法 handleChangeInputName 中，您正在对 BOQSuggestions.js 中的数据进行变异，为什么为什么不改变它的状态呢？也许尝试这样的事情：

如果您使用导入的 BOQSuggestions 值来初始化您的状态：

constructor(props) {
 super(props)
 this.state = { 
    projectId: this.props.match.params.id, 
    BOQSuggestions : BOQSuggestions , 
 } };

在您的 handleChangeInputName 中，您应该通过以下方式更新道具：

handleChangeInputTaskName = async event => {
   var taskName = event.target.value
   var tempBOQ = this.state.tempBOQ;

   if(taskName.charAt(taskName.length -1) == ' '){
      api.autoCompleteBOQ(taskName).then(res => {
        var autoresultArray = res.data.data.hits.hits
        var autoResult = []

        for(var i = 0; i < autoresultArray.length; i++){
          autoResult = (JSON.stringify(autoresultArray[i]._source.boqList)) 
          // Here instead of mutating BOQSuggestion imported value
          // You should modify the state property of BOQSuggestion
          tempBOQ = [...tempBOQ, JSON.stringify(autoresultArray[i]._source.boqList)]
       }
      // So here you should check the length of the tempBOQ instead of the BOQSuggestions
      console.log('Length of the suggestions array ====> ', tempBOQ.length )

      }).catch(error => {        
      console.log('Some error got while performing autocomplete ')
      })      
     }
      // And here in the setState Method you should update the BOQSugegstions
      // Anbd maybe just to confirma that everything updated correctly use the callback of the setState To check when the data was already updated
      this.setState({taskName, BOQSuggestions: tempBOQ}, () => {  console.log(this.state.BOQSuggestions)})    
   }

请记住，setState方法是异步，因此，如果在调用它后立即对其进行检查，则该值可能不会被更新。

现在，您要使用 BOQSuggestions 的每个tme，都应以this.state.BOQSuggestions

的形式访问它

Answer 2

您好@Ricardo我通过如下修改方法来使代码工作：

handleChangeInputTaskName = async event => {
        var taskName = event.target.value

        //Triggers the autocomplete when the user hits the space bar
        if ( taskName.charAt(taskName.length -1) == ' ')
        {

            api.autoCompleteBOQ(taskName).then(res => {
            var autoresultArray = res.data.data.hits.hits
            var autoResult = []

            for(var i = 0; i < autoresultArray.length; i++)
            {
                autoResult = (JSON.stringify(autoresultArray[i]._source.boqList))

                BOQSuggestions.push(autoresultArray[i]._source.boqList)
            }

                console.log('Length of the suggestions array ====> ', BOQSuggestions.length )
                this.setState({ BOQSuggestions })


            }).catch(error => {

                console.log('Some error got while performing autocomplete ')
            })

        }

    }

长度可以正确反映在render（）中。

@Ricardo Gonzalez，非常感谢您的迅速答复！真的很感激！

无法读取阵列长度

2 个答案: