1

Изучаю 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>

2
  • Компонент срабатывает один раз - при первом изменении поля, а дальше все остается также. Как это изменить? Уже 2 недели с этим вопросом сижу. Ведь данные передаются в компоненту.
    – a-sirion
    7 июн 2018 в 7:28
  • this.setState не помогает обновлять
    – a-sirion
    7 июн 2018 в 12:46

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.