Question

我正在我的网站上建立分页，下面的第二个setState方法返回未定义。

我做错了什么？

event.persist()
request('https://swapi.co/api/planets/?search='+event.target.value, (error,response,body) => {
  this.setState({planetData: JSON.parse(body)});
  let data = JSON.parse(body)
  let numberOfPages = Math.ceil(data.count/10)
  console.log(numberOfPages)
  for(var i=1;i<=numberOfPages;i++) {
    var div = document.createElement("button");
    div.textContent = i
    div.addEventListener('click', function(){
      console.log('click')
      request('https://swapi.co/api/planets/?search='+event.target.value+'&page=2', (error,message,body) => {
        //this setState comes back as 'not a function'
        this.setState({planetData: JSON.parse(body)});
        console.log('body yay+'+body)
      })
    })
    document.body.appendChild(div);
  } 
})

Answer 1

您在div.addEventListener('click', function () {...})内使用它。

因此，函数内的this与React Component的范围不同。

您最好使用addEventListener中的箭头功能。

div.addEventListener('click', () => {...})

Answer 2

你在事件监听器中的这个引用了元素，而不是元素的元素。尝试类似：

 <li>
    <ul class="tabs">
    <?php
    $obj = new stdClass();
    $obj->id = 0;
    $obj->title = esc_html__('All', 'arcane');
    $obj->abbr = esc_html__('All', 'arcane');
    $obj->icon = 0;

    array_unshift($games, $obj);

    for($i = 0; $i < sizeof($games); $i++) :
        $game = $games[$i];
        $link = ($game->id == 0) ? 'all' : 'game-' . $game->id;
        $p = array( 'game_id' => $game->id,'status' => array('active', 'done'));
        $matches_tab = $ArcaneWpTeamWars->get_match($p, false, true);

        if(!empty($matches_tab)){
    ?>
        <li<?php if($i == 0) echo ' class="selected"'; ?>><a href="#<?php echo esc_attr($link); ?>" title="<?php echo esc_attr($game->title); ?>"><?php echo esc_attr($game->abbr); ?></a><div class="clear"></div></li>
    <?php } endfor; ?>
    </ul>
    <div class="clear"></div>
</li>

Answer 3

设置状态时可以使用箭头功能。例如

this.setState( () => {
        return {
            planetData: JSON.parse(body)
        }
    })

如果需要，您还可以将prevState作为参数访问

this.setState( (prevState) => {....} )

这将使您可以访问以前的状态，以防您想使用它来操纵当前状态。

使用对象设置状态与您一样，由于其异步特性，可能会导致问题。使用箭头函数可以解决此问题。

始终检查此所指的位置。检查它的一种简单方法是使用Web开发工具并设置断点，以检查它是否指向您想要引用的内容。

setState不是一个函数？

3 个答案: