猿问

React useReducer 清空 initialState

像这样尝试


<!DOCTYPE html>

<html>

<body>


<h2>API Call</h2>


<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

  <label for="gid">Global Device ID:</label><br>

  <input type="text" id="gid" name="gid" value="m99002021" readonly><br>

  <label for="type">Type:</label><br>

  <input type="text" id="type" name="type" value="EVNT" readonly><br><br>

  <label for="start">Start Date Time:</label><br>

  <input type="text" id="start" name="start" value="2020-09-01 00:00:00" readonly><br><br>

  <label for="end">End Date Time:</label><br>

  <input type="text" id="end" name="end" value="2020-09-30 23:59:59" readonly><br><br>

  <input type="submit" value="Execute">

</form> 


<?php

function display()

{

  if(isset($_POST['submit'])

  {

    echo "hello".$_POST["gid"]."<br>";

    echo "hello".$_POST["type"]."<br>";

    echo "hello".$_POST["start"]."<br>";

    echo "hello".$_POST["end"]."<br>";

  }

}

if($_SERVER['REQUEST_METHOD']=='POST')

{

       display();

} 


?>


</body>

</html>

第一个和第二个日志的结果如下：

useReducer 清空 initialState

将计数添加到每个 API 调用后的结果如下所示：

在此处输入图像描述

这是我的减速器的代码，我检查了很多次但看起来不错：

export const counterReducer = (state, action) => {

  switch (action.type) {

    case "increment":

      return {

        ...state,

        products: state.products.map((product) =>

          product.id === action.id

            ? { ...product, count: product.count + 1 }

            : product

        ),

      };


    case "decrement":

      return {

        ...state,

        products: state.products.map((product) =>

          product.id === action.id

            ? {

                ...product,

                count: product.count !== 1 ? product.count - 1 : 1,

              }

            : product

        ),

      };

    default:

      return state;

  }

};


隔江千里
浏览 105回答 1
1回答

江户川乱折腾

useReducer仅在第一次渲染时使用initialState（在 axios 完成之前），在所有后续的重新渲染中，它只会从内存单元返回状态。useReducer你想要做的是在顶部打电话const [countState, dispatch] = useReducer(counterReducer, {products: []});然后打电话dispatch给你getProdsconst getProds = () => {&nbsp; &nbsp; axios.get(`API`).then((res) => {&nbsp; &nbsp; &nbsp; const data = res.data;&nbsp; &nbsp; &nbsp; setProds(data.products);&nbsp; &nbsp; &nbsp; dispatch({ type: "PRODUCTS_FETCHED", payload: data.products});&nbsp; &nbsp; });&nbsp; };并在你的减速器中添加根据大小写来设置状态。export const counterReducer = (state, action) => {&nbsp; switch (action.type) {&nbsp; &nbsp; case "increment":&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; products: state.products.map((product) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; product.id === action.id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? { ...product, count: product.count + 1 }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : product&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; case "decrement":&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; products: state.products.map((product) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; product.id === action.id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...product,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count: product.count !== 1 ? product.count - 1 : 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : product&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; case "PRODUCTS_FETCHED":&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; products: action.payload&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; return state;&nbsp; }};
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答