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>
第一个和第二个日志的结果如下：
将计数添加到每个 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;
}
};
隔江千里1回答
-
江户川乱折腾
useReducer仅在第一次渲染时使用initialState（在 axios 完成之前），在所有后续的重新渲染中，它只会从内存单元返回状态。useReducer你想要做的是在顶部打电话const [countState, dispatch] = useReducer(counterReducer, {products: []});然后打电话dispatch给你getProdsconst getProds = () => { axios.get(`API`).then((res) => { const data = res.data; setProds(data.products); dispatch({ type: "PRODUCTS_FETCHED", payload: data.products}); }); };并在你的减速器中添加根据大小写来设置状态。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 ), }; case "PRODUCTS_FETCHED": return { ...state, products: action.payload }; default: return state; }};
随时随地看视频慕课网APP
相关分类
JavaScript
