Как обновить состояние до определенного значения?

Надеюсь, у вас все хорошо.

Буду очень признателен, если кто-нибудь из вас сможет пролить свет на следующий вопрос.

Есть два соответствующих компонента:

Родительский компонент, который извлекает данные с помощью GraphQL

  let authors = "";
  const { loading, data } = useQuery(FETCH_AUTHORS_QUERY);

  console.log(`Loading: ${loading}`);
  //console.log(data);

  if (data) {
    authors = { data: data.getAuthors };
  }

  return (
    <Grid columns={3}>
      <Grid.Row className="page-title">
        <h1>Recent Essays</h1>
      </Grid.Row>
      {loading ? (
        <h1>Loading essays..</h1>
      ) : (
        authors.data &&
        authors.data.map(author => (
          <Grid.Column key={author.id} style={{ marginBottom: 20 }}>
            <AuthorCard author={author} />
          </Grid.Column>
        ))
      )}
      <Grid.Row></Grid.Row>
    </Grid>
  );
}
const FETCH_AUTHORS_QUERY = gql`
  {
    getAuthors {
      id

      Author
      Description_1
      Description_2
    }
  }
`
  1. Дочерний компонент под названием «AuthorCard» (вы можете видеть его в родительском компоненте выше):
function AuthorCard({ author: { Author, Description_1, id } }) {

const [writer, setWriter] = useState();
  return (
    <Card fluid>
      <Card.Content>
        <Image
          floated="right"
          size="mini"
          src="https://image.cnbcfm.com/api/v1/image/105691887-1556634687926ray.jpg?v=1576249072"
        />
        <Card.Header>{Author}</Card.Header>
        <Card.Meta as={Link} to={`/essays`}></Card.Meta>
        <Card.Description>{Description_1}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <Button as="div" labelPosition="right">
          <Button color="teal" basic>
            <Icon name="heart" />
          </Button>
          <Label basic color="teal" pointing="left"></Label>
        </Button>
        <Button labelPosition="right" as={Link} to={`/essays`}>
          <Button
            color="blue"
            basic
            key={Author.id}
            onClick={() => setWriter(Author)}
          >
            <Icon name="comments" />
          </Button>
        </Button>
      </Card.Content>
    </Card>
  );
}

export default AuthorCard;

Проблема заключается в следующем:

Когда я нажимаю кнопку as={Link} to={/essays} в дочернем компоненте, я хотел бы установить состояние "setWriter" для отдельного автора, чью кнопку я нажимаю.

Однако я не могу указать отдельного автора, чья кнопка нажата. React думает, что я хочу установить «setWriter» для всего списка авторов. Например, когда я запускаю console.log(Author) внутри кнопки, я вижу каждого автора в списке, напечатанном в консоли.

Я попытался добавить идентификатор, используя event.target .value и onChange вместо onClick.

Я просто не смог настроить таргетинг на отдельного автора, чтобы обновить состояние (которое потребуется в другом компоненте).

Пожалуйста, дайте мне знать, если что-то неясно или было бы полезно предоставить более подробную информацию.

Заранее спасибо и удачного кодирования!!!

Дэн


reactjs use-state
person Daniel Roche    schedule 13.11.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны использовать деструктурирующее выражение присваивания, которое позволяет распаковывать значения из массивов или свойства из объектов в отдельные переменные.

Я думаю, вы должны объявить свой дочерний компонент следующим образом:

function AuthorCard({ Author, Description_1, id }) {
  ...
  ...
  ...
}
person Tushar Beladiya    schedule 13.11.2020

arrow_upward
0
arrow_downward

Спасибо за ответ.

Я наконец решил проблему. Мне пришлось использовать:

onClick={e =› setWriter(e.currentTarget.Author)}

Я не знал об использовании «текущей цели».

Затем я могу передать состояние другим компонентам через useContext.

Надеюсь, это может помочь кому-то еще!

Дэн

person Daniel Roche    schedule 13.11.2020