Javascript NextJS 动态添加按钮 onClick

我需要在人们搜索位置时创建一个按钮.

错误Can't find variable: addToResult

class NewCampaign extends React.Component {
    construc到r(props) {
        super(props);
        this.state = {
          value: null
        };
      }
    
  
    


    render(){
        var currentTimeoutId;
        var areas = [];

       
        function addToResult(e){
            areas.push(e);
        }

        function checkAnswer(event, e) {
    
            if(currentTimeoutId){
                clearTimeout(currentTimeoutId);
             }
         
             currentTimeoutId = setTimeout(function(){
                 currentTimeoutId = null;
                    axios.get('https://nominatim.openstreetmap.org/search.php?city='+e+'&countrycodes=AU&featuretype=county&polygon_geojson=1&format=json')
                    .then(function (response) {
                    // handle success
                    document.getElementById("results").innerHTML = "";
                    for (let i = 0; i < response.data.length; i++) { 
                        document.getElementById("results").innerHTML +="<but到n onClick={addToResult("+response.data[i].osm_id+")}>ID:"+response.data[i].osm_id+" - "+response.data[i].display_name+"</but到n>\n\n"
                    }
        
                    })
                    .catch(function (error) {
                    // handle error
                    console.log(error);
                    })
                    .then(function () {
                    // always executed
                    });
                },1000);
        
        }
        return (
            <React.Fragment>
                <div>
            <input name="search" id="search" placeholder='Suburbs'
             value={this.state.value}
             onChange={e => {this.setState({ value: e.currentTarget.value})}}
             onKeyUp={(event) => {checkAnswer(event, this.state.value)}} />
            <div id="results"></div>
            <div id="debug"></div>
             
       
            </div></React.Fragment>  );
    }
}

export default NewCampaign;

经过更多的研究，我发现我需要做如下的事情

    checkAnswer = (event, e) => {
        if(currentTimeoutId){
            clearTimeout(currentTimeoutId);
         }
     
         currentTimeoutId = setTimeout(function(){
             currentTimeoutId = null;
             alert(e)
                axios.get('https://nominatim.openstreetmap.org/search.php?city='+e+'&countrycodes=AU&featuretype=county&polygon_geojson=1&format=json')
                .then(response => {
                    console.log(response);
                    return response.data.map(user => ({
                      Id: `${user.osm_id}`,
                      name: `${user.place_id}`,
                      Company: `${user.display_name}`,
                    }))
                  })
                      .then(users => {
                        this.setState({
                          users,
                          isLoading: true
                        });
                      })
                  .catch(function (error) {
                // handle error
                console.log(error);
                })
                .then(function () {
                // always executed
                
                //alert(response)
                });
            },1000);
    
    }   

然而我仍然在

TypeError: _this.setState is not a function. (In '_this.setState({
                        users: users,
                        isLoading: true
                    })', '_this.setState' is undefined)

不管我是怎么定义的

   construc到r(props) {
        super(props);
        this.state = {
          value: null,
          users: [],
          isLoading: false
        };
      }

注:如果它在emits 时是自动装载机，我就可以让它工作

https://codepen.io/redimongo/pen/dydNbGX?edi到rs=1111

这是一个简单的解决办法

我变了

currentTimeoutId = setTimeout(function(){

到

currentTimeoutId = setTimeout(() => {