我正在用React Native开发一个应用程序,并开始学习redux工具包.

以前我在本地管理我的州.

由于某些原因,我无法理解如何使用redux工具箱保存文本字段的动态输入.

我能找到的所有例子都包含本地(setState).

我成功地处理了所有的支票和计数器..但我在try 处理"onChangeText"函数时仍会收到错误.

我试图将"odo"读数填充为15,然后允许用户将其更改为正确的数字.目前我的代码返回"undefined do this work".

我搜索了论坛、官方文档和youtube,但找不到任何与工具箱(分派/负载)相关的例子.

谢谢你的帮助!

//SLICE

import {
  createSlice
} from "@reduxjs/toolkit";

export const pickupInputSlice = createSlice({
  name: 'pickupInput',
  initialState: {
    odo: '15',
    waitTime: '11',
    notes: '12',
  },
  reducers: {
    odo: (state, action) => {
      state.odo = action.payload + "did this work";
    },
    waitTime: (state, action) => {
      state.waitTime = action.payload;
    },
    notes: (state, action) => {
      state.notes = action.payload;
    },
  }
});

export const {
  odo,
  waitTime,
  notes
} = pickupInputSlice.actions;

export default pickupInputSlice.reducer;


//SCREEN 

const odoReading = useSelector((state) => state.pickupInput.odo)


  <
  View >
  <
  Text style = {
    styles.checklistText
  } >
  Odometer Reading <
  /Text> <
  TextInput
style = {
  styles.checklistTextInput
}
autoCapitalize = 'none'
autoCorrect = {
  false
}
keyboardType = 'number-pad'
maxLength = {
  6
}
value = {
  odoReading
}
onChangeText = {
  () => dispatch(odo(odo.payload))
}
/> <
/View>

推荐答案

必须将从onChangeText接收到的值传递给odo函数

<View>
  <Text style={styles.checklistText}>Odometer Reading </Text>
  <TextInput
    style={styles.checklistTextInput}
    autoCapitalize="none"
    autoCorrect={false}
    keyboardType="number-pad"
    maxLength={6}
    value={odoReading}
    onChangeText={value => dispatch(odo(value))} // pass value to reducer function as payload
  />
</View>;

Reactjs相关问答推荐

在此上下文中如何在缓冲(隐藏)视频和渲染视频之间切换?

InfiniteScroll持续获取数据,直到超过最大更新深度

有没有办法让两个状态在两次精准渲染中更新?

如何在React中的textarea中显示字符数?

如何用Reaction做交互式的MathML?

react 路由GUGUD Use Effect无法通过useNavigate正常工作

这两个子元素在Reaction Native中使用的有什么不同?

是否为Reaction中未使用的组件生成Tailwincss样式?

悬停轴时重新绘制自定义参照线

从ReactDataGridtry 将数据传递给父组件

在 reactJS 中导航时页面重新加载

根据其中的值不同地react setState 更新状态

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用?

下一个js如何从另一个组件更新组件?

为嵌套路由配置一个不存在的 url 的重定向

更新 Next.js 路由查询更改的状态会导致无限循环

如何解决在 react.js 中找不到模块错误

如何使用react 路由将 url 参数限制为一组特定的值?

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

哪个是创建 React 应用程序的更好方法?