Как правильно перенести данные из компонента в компонент без redux?

Question

[Brake Made]

Добрый день, задавал этот вопрос, но перефразирую его с кодом.
Есть компонент который хранит в себе input :

class someClass extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }

    state = {
        searchValue: ''
    }
    onSearchChange = (event, searchValue) => {
        this.setState({ searchValue })
    }
    onSearchClick = () => {
        const { searchValue } = this.state;
        fetch("someuri?name="+searchValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));

  }
return(
<Input leftIcon={<Icon name="search" />}
                        value={this.state.searchValue}
                        width="750px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
)

тут мы вводим значение , делаем поиск по json и по логике выводим его потом в дочку .
Вот дочка :

class SearchHub extends Component{

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }
  

  render(){
    const { error, isLoaded, items } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <Loader type="big" active> </Loader>;
} else {
  return (
    <div className={styles.parent}>
      <div>
        {items.map(item => (
          <Gapped gap={20} key={item.name}>
            <span><b>{item.rating.totalLove}</b></span>
            <span><img src={shape} alt="heart"/></span>
            <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
            <span>{item.name}<br/>{item.role}</span>
          </Gapped>
        ))}
      </div>
    </div>
    );
}
}
}

На каком этапе я . Данные вводятся и при нажатии на кнопку идет поиск , делаю вывод в консоль и он выводит верное значение , по сути данные хранятся в items . Но как мне их передать в дочку на отображение ?
redux не использую по причине изучения reactjs и это SPA где redux ненужон.

Answer 1

[0xD34F]

Но как мне их передать в дочку на отображение ?

<SearchHub error={error} isLoaded={isLoaded} items={items} />

Сама "дочка" будет выглядеть несколько иначе, чем у вас есть сейчас, как-то так:

class SearchHub extends Component {
  render(){
    const { error, isLoaded, items } = this.props;

    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <Loader type="big" active> </Loader>;
    } else {
      return (
        <div className={styles.parent}>
          <div>
            {items.map(item => (
              <Gapped gap={20} key={item.name}>
                <span><b>{item.rating.totalLove}</b></span>
                <span><img src={shape} alt="heart"/></span>
                <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
                <span>{item.name}<br/>{item.role}</span>
              </Gapped>
            ))}
          </div>
        </div>
      );
    }
  }
}

Ещё у вас косяк при получении данных - перед запросом надо бы выставлять isLoaded: false и сбрасывать значение error, а иначе не будет видно индикатора загрузки, и после первой же ошибки невозможно больше будет увидеть никаких данных.

Comments

[Brake Made]

Спасибо больше, все таки я был прав о переносе . Делал все верно и косяк у меня и вправду с запросом, вот только у меня уже стоит isLoaded : False первоначально.
но возможно , я что то делаю не так, можете подсказать?
Буду очень благодарен:

class InputResult extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }

    state = {
        searchValue: ''
    }
    onSearchChange = (event, searchValue) => {
        this.setState({ searchValue })
    }
    onSearchClick = () => {
        const { searchValue } = this.state;
        fetch("http://localhost:8080/api/users/?name="+searchValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));

  }
    render() {
        const { items } = this.state;
        console.log('',items);
        return ()

[0xD34F]

Данил Угрик,

у меня уже стоит isLoaded : False первоначально

Загрузка данных может выполняться лишь единожды? Что-то я в этом сомневаюсь. При повторной загрузке isLoaded у вас будет всё так же true, то есть, вместо индикатора загрузки будут показываться старые данные.

Кроме того, первоначальное значение false - это не очень правильно, ведь загрузка данных выполняется по требованию пользователя, а не автоматически. То есть, сейчас у вас так: пользователь ничего ещё не сделал, а индикатор загрузки уже отображается.

возможно , я что то делаю не так

На чём основаны ваши подозрения? - ну там, ошибки в консоли, поведение приложения отличается от ожидаемого, etc.

Непонятный момент - вы почему searchValue инициализируете вне конструктора? Вы же в нём задаёте стейт, то есть получается, что searchValue у вас изначально нет вовсе. Отнесите его к остальным данным:

constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: true,
    items: [],
    searchValue: ''
  };
}

[Brake Made]

0xD34F,

На чём основаны ваши подозрения? - ну там, ошибки в консоли, поведение приложения отличается от ожидаемого, etc.

Потому что код не работает :) Ошибок никаких нет, сейчас на данный момент так как вывод поиска идет в консоль то с ним все ок, он находит нужное значение , и отображает его в консоле, но не в компоненте , вместо этого у меня просто error. И если я все правильно понимаю, то это связано с тем , что когда страница загружается, компонент с выводом делает проверку условия, и из за того , что в props пусто, он сразу выдает ошибку. Хотя так не должно быть. Ибо по логике условие должно проходить только после получения props.

[Brake Made]

0xD34F, если я правильно понял, то нужно переработать условие

[0xD34F]

Данил Угрик, какое условие переработать, которое в render'е SearchHub'а? Да с ним порядок вроде как.

А почему ошибка показывается... один из вариантов я уже озвучивал - не удаляете сообщение об ошибке перед повторным запросом данных, достаточно один раз ошибке возникнуть - и больше ничего кроме этой ошибки вы не увидите.

Если же проблема не только в этом - попробуйте выложить код в песочницу, я гляну, что может быть не так.

[Brake Made]

0xD34F, то есть , мне достаточно еще одну функцию на удаление значения написать , и все будет ок ?:)

[0xD34F]

Данил Угрик, может быть. А может быть и нет - вдруг ещё какие баги вылезут?

[Brake Made]

0xD34F,все получилось , большое спасибо :)

Answer 2

[Виталий]

странный вопрос, если он задан правильно, то вопрос о том как передавать данные в дочерние компоненты, ответ очевиден - props
если стоит задача передать из одного компонента в другой (когда ни один из компонентов не является родителем или дочерним), то их можно обернуть в один компонент, отдающий компонент должен иметь колбек функцию из серии stateOnChanged , в родителе это изменение фиксируется в стейте, на который подписан принимающий компонент, дальше данные перебегают так же через пропс.

Comments

[Brake Made]

да все верно, через props, только не совсем понимаю как правильно все таки передать из родителя в дочку.
Можно пример , на основе моего кода?