Как передать значение Like из одного компонента в другой, используя reactjs? - PullRequest
Новая
       4

Как передать значение Like из одного компонента в другой, используя reactjs?

0 голосов
/ 03 апреля 2020

Я новичок ie, чтобы реагировать, есть компонент данных, где мы показываем заголовок цитаты, если кому-то интересно, они нажимают на детали и могут заполнить форму. Когда мы увидим рядом с заголовком, отобразится номер заинтересованного пользователя (Like). Когда мы нажимаем ссылку «Нравится», она перенаправляется на компонент ViewDetails, чтобы отобразить сведения о пользователе. Моя цель - заинтересовать пользователя. Но не удалось получить номер ссылки Like из компонента ViewDetails. Может ли кто-нибудь помочь мне в этом запросе?

Компонент данных: 

class Data extends React.Component {
  constructor() {
    super();
    this.state = {
      Data: []
    };
  }
  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch("/api/post")
      .then(res => res.json())
      .then(data => {
        this.setState({
          Data: data
        });
      });
  }
  render() {
    const { Data } = this.state;
    return (
      <div>
        {Data.map(data => {
          return (
            <div key={data.DId}>
              <div className="a-header">{data.title}</div>
              <div className="mylink">
                <Link to={`/Fillform/${data.DId}`}>
                  Details <Icon name="angle double right" size="small" />
                </Link>
              </div>
              <div className="link">
                <Link to={`/ViewDetails/${data.Did}`}>Like</Link>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Data;

Компонент ViewData: 

class ViewDetails extends React.Component {
 constructor() {
    super();
    this.state = {
      View: [],
      Like: '',

    }
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch("/api/Users/" + this.props.match.params.id)
      .then(res => res.json())
      .then(data => {
        this.setState({
          View: data.item1,
          Like: data.item2
        });
      });
  }

  render() {
    const { View } = this.state;
    return (
      <Segment>
        {View.map(tab => {
          return (
            <Table color="blue" className="myresponse">
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>Name</Table.HeaderCell>
                  <Table.HeaderCell>Email</Table.HeaderCell>
                </Table.Row>
              </Table.Header>

              <Table.Body key={tab.DId}>
                <Table.Row>
                  <Table.Cell>{tab.name}</Table.Cell>
                  <Table.Cell>{tab.email}</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
          );
        })}
      </Segment>
    );
  }
}

Здесь из ViewDetails я должен получить no.of заинтересованных Пользователи через Like переменную.

Мой запрос: если мы не можем получить число из viewDetails, тогда нам нужно сделать Parent и child COmponent. Но я не мог понять, как сделать родительский и дочерний компоненты для этих двух компонентов.

"https://codesandbox.io/s/cocky-engelbart-s8xfp" Может кто-нибудь помочь мне в этом? Заранее спасибо

1 Ответ

0 голосов
/ 03 апреля 2020

Из компонента попробуйте передать его следующим образом: 

<Link
    to={{
      pathname: "/ViewDetails/${data.Did}",
      likes: {data.Did}
   }}>
    Like
</Link>

В принимающем компоненте получить к нему доступ, используя 

this.props.location.likes
...