reactjs - 试图在函数中获取标签键但显示为“”

Question

我想tags在点击时从博客文章中获取相应的框。但是，当控制台记录打印标签时，它在内部显示为“” randomizedHex()。标签隐藏在前端。有人可以帮忙吗？

演示： https ://codesandbox.io/s/prod-glade-lsf46?file=/src/App.js

export default function App() {
  const [blogArticles, setBlogArticles] = useState([]);
  const [showColor, setShowColor] = useState("");
  const [findTag, setFindTag] = useState("");

  useEffect(() => {
    setBlogArticles(items);
  }, []);

  const randomizedHex = (blogArticles) => {
    setFindTag(blogArticles.tags);
    console.log("Print tag:", findTag);
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
    setShowColor(randomColor);
  };

  return (
    <div className="App">
      <div className="row">
        {blogArticles.map(
          ({
            sys: { id, createdAt },
            fields: { title, images, description, shortDescription, tags }
          }) => (
            <div key={id} className="column">
              <article
                onClick={() => {
                  randomizedHex(blogArticles);
                }}
                key={id}
                className="blogmaintile"
              >
                <img
                  className="blogImage"
                  key={images}
                  src={images}
                  alt="myimg"
                ></img>
                <div className="blogtitle">
                  <span key={title}>{title}</span>
                </div>
                <section>
                  <p className="blogdescription" key={shortDescription}>
                    {shortDescription}
                  </p>
                </section>
                <section>
                  <p className="blogdescription" key={description}>
                    {description}
                  </p>
                </section>

                <section>
                  <p style={{ display: "none" }} className="tag" key={tags}>
                    {tags}
                  </p>
                </section>

                <section className="col2">
                  <a href="https://google.com">
                    Read more {">"}
                    {">"}
                  </a>
                </section>
              </article>
            </div>
          )
        )}
      </div>
    </div>
  );
}

标签： reactjsreact-hooks

Answer 1

您需要将tagsdestructured from传递给blogArticle.fieldsto randomizedHex。

{blogArticles.map(
  ({
    sys: { id, createdAt },
    fields: { title, images, description, shortDescription, tags } // <-- tags
  }) => (
    <div key={id} className="column">
      <article
        onClick={() => {
          randomizedHex(tags); // <-- pass tags
        }}
        key={id}
        className="blogmaintile"
      >
        ...
      </article>
    </div>
  )
)}

转换randomizedHex以使用传递的标签与整个 blogArticles数组。

const randomizedHex = (tags) => {
  setFindTag(tags);
  console.log("Print tag:", tags);
  const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  setShowColor(randomColor);
};