Question

利用React useReducer并尝试进行状态更新，并在我进行更改时重新渲染React。

JSX调用reducer：

<div class="collapse multi-collapse" id="multiCollapseExample1">
  <?php
    $args = array( 'post_type' => 'paslaugos' );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); ?>
      <div class="card card-body">
        <h4 class="d-flex justify-content-center"><?php the_field( 'paslaugos1_text' ); ?></h4>
        <ul class="kinas-teatras">
          <li>scenarijaus rašymas</li>
          <li>scenarijaus rašymas komandoje
          (co-writing)</li>
          <li>scenarijaus traktuotės (treatment), sinopsio ir kitų tekstų rašymas</li>
          <li>scenarijaus redagavimas (script editing)</li>
          <li>giluminė scenarijaus analizė ir
          “gydymo” paslaugos (script doctor</li>
          <li>individualios/ kolektyvinės konsultacijos</li>
        </ul>
    </div>
  <?php endwhile; $loop->reset_postdata(); ?>
</div>

和useReducer：

<button onClick={() => dispatch({ type: "DECREMENT", item })} >+</button>

完整代码可在下面找到。

Answer 1

由于您返回了相同的对象，所以减速器无法检测到状态更改。通过比较上一个状态值和新状态值，通过===比较或Object.is()比较来检测更改，这基本上是同一件事（不确定哪个可以在React文档中找到）。

所以代替：

const newCart = state;

您需要这样做：

// shallowly copy the state so now Object.is(newState, prevState) returns false
const newCart = [...state];
...
return newCart

Answer 2

您正在将newCart设置为状态，它指向同一件事。要么克隆状态，要么返回一个新的对象实例。

switch (type) {
    case "INCREMENT": {
      const newCart = state;
      const u = { ...item, quantity: item.quantity + 1 };
      const index = newCart.findIndex(eachitem => item.id === eachitem.id);
      newCart.splice(index, 1, u);
      console.log("INCREMENT", newCart);

      return [...newCart];
    }
    case "DECREMENT": {
      const newCart = state;
      const u = { ...item, quantity: item.quantity - 1 };
      const index = newCart.findIndex(eachitem => item.id === eachitem.id);
      newCart.splice(index, 1, u);
      console.log("DECREMENT", newCart);
      return [...newCart];
    }
    case "REMOVE": {
      return state.filter(eachitem => item.id !== eachitem.id);
    }
    default: {
      return state;
    }
  }
};

更新的沙盒

使用useReducer反应更新状态

2 个答案: