Внутри моего приложения React у меня есть следующий код JSX:
import React, { Component } from 'react'
export default class CategoryForm extends Component {
render() {
return (
<div className="category-form">
<label>
Category
<select value={this.props.selectedCategory} id="selectedCategory" onChange={this.props.handleChange}>
<option value="Best">Best</option>
<option value="Controversial">Controversial</option>
<option value="Hot">Hot</option>
<option value="New">New</option>
<option value="Rising">Rising</option>
<option value="Top">Top</option>
</select>
</label>
</div>
)
}
}
Это простой элемент с дочерними элементами. Значение по умолчанию инициализируется как «Лучшее». При первоначальном посещении или обновлении страницы значение, содержащееся в элементе, возвращается к «Лучшему» (как и ожидалось), но когда пользователь уходит со страницы и нажимает кнопку «Назад», элемент сохраняет то значение, которое было ранее выбрано. Как мне предотвратить такое поведение? Я пытаюсь избежать принудительного повторного рендеринга.
EDIT: я допустил ошибку, пропустив код, потому что думал, что это упростит вопрос. Вот состояние, которое я инициализирую в конструкторе компонента, а также дочерний компонент, создаваемый в родительском компоненте. Я изменил свой код в соответствии с документацией React (и HMR) на контролируемых компонентах, и у меня все еще та же проблема.
export default class App extends Component {
constructor(props) {
super(props)
this.state= {
selectedCategory: "Best",
minScore: -100,
numPosts: 25,
subreddit: "",
searchTerm: "",
timeframe: "hour",
postArray: [],
animationTracker: false,
selectedForm: "Category",
}
this.handleChange = this.handleChange.bind(this);
this.backendCall = this.backendCall.bind(this);
this.changeForm = this.changeForm.bind(this);
}
\\ handle change method
handleChange(event) {
// dynamically set the key of the setstate object to be equal to the id of the specific form
let selectedCategory = event.target.id;
this.setState({[selectedCategory]: event.target.value});
}
\\ later on...
{this.state.selectedForm === "Category"
? <CategoryForm selectedCategory={this.state.selectedCategory} handleChange={this.handleChange.bind(this)}/>
: <TermForm handleChange={this.handleChange.bind(this)}
searchTerm={this.state.searchTerm} timeframe={this.state.timeframe} />
}
Снимок экрана Вот снимок экрана, показывающий проблему в действие. После нажатия кнопки «Назад» состояние повторно инициализируется (что должно изменить значение на «Лучшее»), но значение моего элемента остается таким, какое выбрал пользователь перед уходом со страницы (в данном случае «Горячий»). . Кроме того, если я изменю поля ниже (минимальная оценка и количество сообщений), а затем уйду со страницы, а затем нажму кнопку «Назад», эти поля будут следовать ожидаемому поведению и вернутся к состоянию по умолчанию.