React : Value / State未更新
React : Value / State未更新
提问于 2021-01-05 08:32:25
我有App.js -
import './App.css';
import { connect } from 'react-redux'
import { ActionChangeName } from "./Actions/Action";
function App(props) {
return (
<div className="App">
<div>
Name
<input id="txtName" type="text"></input>
</div>
<div>
Age
<input id="txtAge" type="text"></input>
</div>
<div>
<button onClick={()=>{props.ActionChangeName("Suresh")}}>Change</button>
</div>
My Name is {props.name}.
I am {props.age} Years Old !
</div>
);
}
const mapToProp=(state)=>{
return{
...state,
name:"Sagar",
age:"22"
}
}
const mapToDispatch=(dispatch)=>{
return {
ActionChangeName:(name)=>{
dispatch(ActionChangeName(name));
}
}
}
export default connect(mapToProp,mapToDispatch)(App) ;Reducer.js -
const iState={
name :"sagar",
age:"22"
}
export const reducer=(state=iState,action)=>{
alert(action.payload);
return {
...state,
name:action.payload
}
}Action.js -
import React from 'react'
export function ActionChangeName(name) {
return {
type:"CHANGE_NAME",
payload :name
}
}当我通过调度功能发送"Suresh“时，我可以看到它通过警报到达我的减速机。但我预计App.js中的lable值会更新为-
我叫苏雷什。
我可以看到它的剩余-我的名字是萨加尔，这是最初的状态。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-05 08:47:55
看起来，您确实在mapStateToProp函数中再次重写了您的名称和年龄，该函数中只应返回状态：
const mapToProp = (state) => {
return {
...state,
// you would nee to remove this overrides
// name: "Sagar",
// age: "22"
}
}Stack Overflow用户
发布于 2021-01-05 09:01:44
在@ the 2005的答案中更新，我更新了-
const mapToProp=(state)=>{
return{
...state,
name:state.name==null?"Sagar":state.name
//age:"22"
}
}这开始起作用了。所有的功劳都归功于@ this 2005，因为没有他最初的回答，这一点还没有达到。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65575427
复制相关文章
相似问题
腾讯云开发者
