NextJS动态添加按钮onClick

Question

我需要在人们搜索位置时创建一个按钮。当用户点击按钮时，它应该运行一个 onClick 函数。但是因为它是一个 innerHTML += button 它似乎不想找到这个函数。

错误Can't find variable: addToResult

class NewCampaign extends React.Component {
    constructor(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 +="<button onClick={addToResult("+response.data[i].osm_id+")}>ID:"+response.data[i].osm_id+" - "+response.data[i].display_name+"</button>\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)

然而我在

中定义了它

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

请注意，如果它在启动时是自动加载程序，我就能让它工作

https://codepen.io/redimongo/pen/dydNbGX?editors=1111

是一个简单的修复

我变了

currentTimeoutId = setTimeout(function(){

到

currentTimeoutId = setTimeout(() => {

Answer 1

错误是由于您的这段代码造成的：

"<button onClick={addToResult("+response.data[i].osm_id+")}>ID:"+response.data[i].osm_id+" - "+response.data[i].display_name+"</button>\n\n"

我建议您制作另一个组件来呈现“addToResult”和内部内容，而不是使用“.innerHTML”

一个可能的好方法是为数据获取的结果设置一个状态：

const [results,setResults] = useState([]);

然后，您可以使用自定义按钮来呈现每个结果：

const Button = ({onClick, children}) => <button onClick={onClick}>{children}</button>

稍后在您的渲染部分只需映射结果并将其显示为：

{results.map(result => <Button onClick={}>{result.osm_id}</Button>}

NextJS动态添加按钮onClick

NextJS dynamically add button onClick

javascript

reactjs

next.js