DanilAndreevich
@DanilAndreevich

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

Добрый день, задавал этот вопрос, но перефразирую его с кодом.
Есть компонент который хранит в себе 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 ненужон.
  • Вопрос задан
  • 307 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Но как мне их передать в дочку на отображение ?

<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, а иначе не будет видно индикатора загрузки, и после первой же ошибки невозможно больше будет увидеть никаких данных.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vshvydky
странный вопрос, если он задан правильно, то вопрос о том как передавать данные в дочерние компоненты, ответ очевиден - props
если стоит задача передать из одного компонента в другой (когда ни один из компонентов не является родителем или дочерним), то их можно обернуть в один компонент, отдающий компонент должен иметь колбек функцию из серии stateOnChanged , в родителе это изменение фиксируется в стейте, на который подписан принимающий компонент, дальше данные перебегают так же через пропс.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы