使用Redux时反应本机Textinput Flickers

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。 M. Alex想要引起更多关注来回答这个问题。

在我的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的值不会立即更新，因此当用户键入相对快时，它会闪烁。

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

Answer 1

在渲染中可以使用step（不相关，我知道），并且将使用key，我将对此进行更改

value={this.props.steps[index]}

in

value={step}
key={index}

如前所述，在handleFieldChange中，您以错误的方式更改了props，这：

var steps = this.props.steps;

需要更改：

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

除此以外，我看不到为什么handleFieldChange需要成为async函数的证据，我将从其声明中删除async。

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

希望这会有所帮助。