使用 Redux 时 React Native Textinput 闪烁

Question

在我的 React 本机应用程序中，包含一个表单的多个 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 函数中，textinput 的值是使用 redux 编辑的，表单是这样验证的：

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

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

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

Answer 1

在渲染中可以使用 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...

希望对您有所帮助。

Answer 2

测试了一段时间，发现与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 是屏幕中的唯一组件，则不会出现此问题，但只有当它嵌套在多个视图中时才会出现，就像这里的情况一样。但是，我不知道这个错误的直接原因是什么。

使用 Redux 时 React Native Textinput 闪烁

React Native Textinput Flickers when using Redux

javascript

textinput

reactjs

react-native

redux