Я создал простое веб-приложение на React, которое отлично работает, однако, когда я запускаю его в Safari, оно меняет порядок расположения в зависимости от того, какое из них набирается. Вот короткое видео
По сути, я разделил весь код на базовые элементы, но без каких-либо изменений. Как только я удалил двухстороннюю привязку, он начал работать без этого поведения. Так это ошибка в сафари или как я могу использовать двухстороннюю привязку без этого поведения? Вот код, который я использую для рендеринга этих входных данных
inputChangedHandler = (event, controlName) => {
const updatedControls = {
...this.state.controls,
[controlName]: {
...this.state.controls[controlName],
value: event.target.value,
valid: this.checkValidity(event.target.value, this.state.controls[controlName].validation),
touched: true
}
};
this.setState({ controls: updatedControls })
}
render() {
const formElementArray = [];
for (let key in this.state.controls) {
formElementArray.push({
id: key,
config: this.state.controls[key]
});
}
let form = formElementArray.map(formElement => (
<Input
key = {formElement.id}
elementType = {formElement.config.elementType}
elementConfig = {formElement.config.elementConfig}
value = {formElement.config.value}
invalid = {!formElement.config.valid}
shouldValidate = {formElement.config.validation}
touched = {formElement.config.touched}
changed = {(event) => this.inputChangedHandler(event, formElement.id)}
/>
))
return (
<div className = {classes.Auth}>
<form onSubmit = {this.submitHandler}>
{form}
<Button btnType = "Success">SUBMIT</Button>
</form>
</div>
);
Я только что создал новое приложение, реагируя только на два входа, которые используют двухстороннюю привязку, и я получаю точно такой же результат
файлы с узлом с папкой узла
файлы без узла без папки узла





Это не ошибка, это стандартное поведение: Гарантирует ли JavaScript порядок собственности объекта?
Если вы хотите, чтобы порядок был согласованным, вам следует поместить ключи в controls в массив или получить массив ключей, отсортировать их и перебрать ключи в вашем методе render().
Я применил другой подход к этой проблеме, но я все еще считаю, что это ошибка сафари ... Это нормальный способ, которым меня научили отображать вводимые данные в React. Этот метод хорошо работает во всех браузерах, кроме Safari, поэтому я не могу поверить, что это стандартное поведение ..
Спасибо steenuil .. Спасибо за разъяснения. В массиве есть ключи, и я даже не пытался их отсортировать, потому что все остальные браузеры все время правильно сортируют массив. Только у Safari есть эта проблема. Тогда я попробую разобрать это ... Большое спасибо