Изучаю react.js. Есть компонент, в котором находится инпут. Пользователь вводит имя персонажа. По изменению значения поля происходит событие onChange, рендерится новый компонент, куда отправляется значение поля. Дальше по ссылке ('...' + переданные данные) идет запрос на сервер, откуда приходят данные по совпадениям. Не могу понять, почему не работает код. Точнее он работает, если я размонтирую компонент. Но это неправильно. Должно просто передаваться новое значение и затем заново отправляется запрос на сервер. Что я делаю не так?
это App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import Search from './Search.js'
import './App.css';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
text: ''
}
}
onFieldChanged(e) {
//ReactDOM.unmountComponentAtNode(document.getElementById('search'));
const text = e.target.value.trim();
console.log(text);
render(<Search name={text} />,
document.getElementById('search'));
}
render() {
return (
<div className='search__container'>
<label>
<input placeholder="Enter a name" id="input-main" onChange={this.onFieldChanged} />
</label>
</div>
)
}
}
export default App;
это Search.js
import React from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
class Search extends React.Component {
constructor(props) {
super(props)
this.state = {
data: [],
isLoading: false,
name: ''
}
}
componentWillreceiveProps() {
this.setState({ name: this.props.name});
}
componentDidMount() {
const xhr = new XMLHttpRequest();
console.log(this.props.name);
xhr.open('GET', 'https://swapi.co/api/people/?search=' + this.props.name, true);
xhr.send();
this.setState({ isLoading: true })
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) {
return false
}
if (xhr.status !== 200) {
console.log(xhr.status + ': ' + xhr.statusText)
} else {
this.setState({
data: JSON.parse(xhr.responseText),
isLoading: false,
})
}
}
}
renderOneElement(){
const { data } = this.state
if (data.results !== undefined) {
const results = [];
for (var i = 0; i < this.state.data.results.length; i++) {
results[i] = this.state.data.results[i];
}
const peopleList = results.map((item, index) =>
<li className = 'person__name' key={index}><a className = 'person__link' href={item.url}>{item.name}</a></li>
);
return (
<div className = 'person'>
<ul className = 'person__container'>{peopleList}</ul>
</div>
)
}
}
render() {
return (
<div>
{this.renderOneElement()}
</div>
)
}
}
export default Search;
В index.html добавлен <div id="search"></div>