使用 Redux 时反应本机文本输入闪烁

Posted 2023-04-18

【中文标题】使用 Redux 时反应本机文本输入闪烁

【英文标题】：React Native Textinput Flickers when using Redux

【发布时间】：2020-10-05 02:48:22

【问题描述】：

在我的 react native 应用程序中，包含多个 TextInputs 的表单，呈现如下：

this.props.steps.map(step, index) => (
  <TextInput
    multiline=true
    value=this.props.steps[index]
    placeholder="Enter Step"
    onChangeText=value => this.handleFieldChange(value, index)
    style= padding: 10, fontSize: 15 
  />
)

在onChangeText 函数中，使用redux 编辑文本输入的值，并验证表单：

handleFieldChange = async (value, index) => 
  var steps = this.props.steps;
  steps[index]= value;
  store.dispatch(updateSteps( steps: steps ));
  this.validateForm();
;

这意味着 TextInput 的值不会立即更新，因此当用户键入相对较快时，它会闪烁。

有人可以建议如何使文本输入更顺畅地更新吗？

【问题讨论】：

可以加世博小吃吗？无论如何你应该在修改var steps = [...this.props.steps]

之前浅拷贝redux store

【参考方案1】：

经过一段时间的测试，我意识到这与onChangeText函数无关。我发现 TextInput 只有在其内容超过组件的初始宽度后才会闪烁。因此，将 TextInput 设置为屏幕的整个宽度并添加 textAlign 以使输入居中即可解决此问题。

var width = Dimensions.get("window").width

<TextInput
  multiline=true
  value=this.props.steps[index]
  placeholder="Enter Step"
  onChangeText=value => this.handleFieldChange(value, index)
  style= width: width, padding: 10, fontSize: 15, textAlign: "center" 
/>

如果 TextInput 是屏幕中的唯一组件，则不会发生此问题，但仅当它嵌套在多个视图中时才会发生，就像这里的情况一样。但是，我不知道这个错误的直接原因是什么。

【讨论】：

老兄 - 感谢您回来回答您的问题。我有点卡在这里，不想知道在弄清楚之前我会走了多长时间

【参考方案2】：

在渲染中可以使用step（我知道这无关紧要）并且会使用key，我会更改它

value=this.props.steps[index]

在

value=step
key=index

正如已经评论的那样，在handleFieldChange 中，您正在以一种糟糕的方式更改props，这是：

var steps = this.props.steps;

需要更改：

var steps = [...this.props.steps];

除此之外，我看不出为什么handleFieldChange 必须是async 函数，我会从它的声明中删除async。

最后，问题的根源可能在updateSteps 或validateForm...

希望这会有所帮助。