Я делаю своего рода персональный сайт, где у меня есть куча стилизованных карточек, отрисовываемых через карту массива, созданного с помощью запроса GraphQL.

У этих карточек есть тег, и моя цель состоит в том, чтобы, когда вы щелкнете по указанному тегу, он отфильтрует исходный массив, оставив только элементы, которые включают тег.

Идет что-то вроде этого


const Tutoriales = ()=> {




    const blog = useStaticQuery(graphql`
    query {
        allMarkdownRemark (
          sort: {fields: frontmatter___date, order: DESC}

         )


        {
            edges {
                node { 
                    frontmatter {
                        title,
                        date,
                        type,
                        abs,
                        tag,
                        featuredImage {
                            relativePath,
                            absolutePath,
                            childImageSharp{
                                fixed(width: 300) {
                                    ...GatsbyImageSharpFixed
                                }
                            }
                        }

                    }
                    html,
                    excerpt,
                    fields {
                        slug
                    }
                }
            }
        }
    }
    `
    );


    let pijon = blog.allMarkdownRemark.edges;
    const [cards, setCards] = useState(pijon);
    const [filter, setFilter] = useState("");

 return (
<div>

{
            cards.map((edge)=> {

 <Card className={classes.card}>
      <CardHeader
                      avatar={
                        <Avatar aria-label="Recipe" className={classes.avatar}>
                          {edge.node.frontmatter.type}
                        </Avatar>
                      }

                      title={<Link className={center.nodecor} to={url}>{edge.node.frontmatter.title}</Link>}
                      subheader={<Link className={center.nodecor} to={url}>{edge.node.frontmatter.date} </Link>}

                    />

 // This is my tag DIV, Im trying to make it work so that when you click
 // on the div, it will use the Filter Hook, to filter the card array


 <div onClick={ () => {
            setFilter(edge.node.frontmatter.tag);


            console.log(filter)
            let filteredCards = cards.filter((card) => {
              return card.node.frontmatter.tag === filter
            }

            )
          setCards(filteredCards);

        }

        }
           className={center.right}>
              {edge.node.frontmatter.tag}  </div>
          </div>


 </Card>

    )
            })
            }

</div>

    )
}

export default Tutoriales



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

Но при этом все, что я получаю, - это пустой массив. Я знаю, что это как-то связано с асинхронностью хука setState, и я читал об UseEffect, но, похоже, не могу заставить его работать.

Используя console.log, я смог понять, что только второй раз, когда я нажимаю на тег (со значением onClick), он работает.

Любые комментарии приветствуются.

1
Martin Ch 13 Окт 2019 в 23:11

1 ответ

Лучший ответ

Вы правы, это происходит из-за того, что звонки setState группируются. Поэтому, если вы вызываете setFilter и начинаете использовать filter в том же блоке, вы фактически используете его предыдущее значение. Вот почему он работает во второй раз.

setFilter(edge.node.frontmatter.tag);
console.log(filter);    <- filter has not actually changed yet

Самым простым решением было бы удалить const [filter, setFilter] = useState(""); и просто использовать выбранный вами фильтр напрямую:

<div 
  onClick={() => {
    const filter = edge.node.frontmatter.tag;
    let filteredCards = cards.filter((card) => {
      return card.node.frontmatter.tag === filter
    });
    setCards(filteredCards);
  }}
  className={center.right}
>
    {edge.node.frontmatter.tag}
</div>

Другое решение - использовать ловушку useEffect и обновлять карточки после изменения filter:

const [cards, setCards] = useState(pijon);
const [filter, setFilter] = useState("");
useEffect(() => {
  if (filter) {  // don't do anyhiting when filter is empty on initial render
    const filteredCards = cards.filter((card) => {
      return card.node.frontmatter.tag === filter
    }
    setCards(filteredCards);
  }
}, [filter, setCards]);

// ...

<div 
  onClick={() => {setFilter(edge.node.frontmatter.tag);}}
  className={center.right}
>
    {edge.node.frontmatter.tag}
</div>
0
Istvan Szasz 13 Окт 2019 в 21:03