React Hooks:使用OnClick仅更新第二次按钮的Usestate

Question

编辑：忘记一个重要的部分 - 如果单击Jeff A. Menges旁边的按钮并检查控制台日志，这将是明显的。

代码的重要部分是" setfullresults(cardResults.data.concat(cardResultspagetwo.data((("在按钮代码的onclick中。我认为它应该为我告诉的任何内容都全力以赴...除了您第一次单击它时不起作用。每次之后，它都起作用，但第一次行不通。对于下一组来说，这将是麻烦的，因为我无法映射未定义的数组，而且我不想告诉用户只单击按钮两次以获取实际搜索结果。

我猜想使用效果会起作用，但是我不知道如何编写它或将其放在哪里。显然，它在应用程序功能组件的顶部没有工作，但是我尝试将其放置的其他任何地方都会给我一个错误。

我已经尝试了" this.forceupdate(("，很多地方都建议快速修复(但建议不要使用 - 但是我一直在尝试弄清楚这几个小时(，但是" this.forceupdate(("无论我何处，都不是一个功能。

请帮助我获得此按钮第一次使用。

import React, { useState, useEffect } from "react";
const App = () => {
  let artistData = require("./mass-artists.json");
  const [showTheCards, setShowTheCards] = useState();
  const [fullResults, setFullResults] = useState([]);
  useEffect(() => {
    setFullResults();
  }, []);
  let artistDataMap = artistData.map(artistName => {
    //console.log(artistName);
    return (
      <aside className="artist-section">
        <span>{artistName}</span>
        <button
          className="astbutton"
          onClick={ function GetCardList() {
            fetch(
              `https://api.scryfall.com/cards/search?unique=prints&q=a:"${artistName}"`
            )
              .then(response => {
                return response.json();
              })
              .then((cardResults) => {
                console.log(cardResults.has_more)
                if (cardResults.has_more === true) {
                fetch (`https://api.scryfall.com/cards/search?unique=prints&q=a:"${artistName}"&page=2`)
                .then((responsepagetwo) => {
                  return responsepagetwo.json();
                })
                .then(cardResultsPageTwo => {
                  console.log(`First Results Page: ${cardResults}`)
                  console.log(`Second Results Page: ${cardResultsPageTwo}`)
                  setFullResults(cardResults.data.concat(cardResultsPageTwo.data))
                  console.log(`Full Results: ${fullResults}`)
                })
                }
                setShowTheCards(
                  cardResults.data
                  .filter(({ digital }) => digital === false)
                  .map(cardData => {
                    if (cardData.layout === "transform") {
                      return (
                        //TODO : Transform card code
                        <span>Transform Card (Needs special return)</span>
                      )
                    }
                    else if (cardData.layout === "double_faced_token") {
                      return (
                        //TODO: Double Faced Token card code
                        <span>Double Faced Token (Needs special return)</span>
                      )
                    }
                    else {
                      return (
                        <div className="card-object">
                          <span className="card-object-name">
                          {cardData.name}
                          </span>
                          <span className="card-object-set">
                          {cardData.set_name}
                          </span>
                          <img
                          className="card-object-img-sm"
                          alt={cardData.name}
                          src={cardData.image_uris.small}
                          />
                        </div>
                      )
                    }
                  })
                )
              });
          }}
        >
          Show Cards
        </button>
      </aside>
    );
  });
  return (
    <aside>
      <aside className="artist-group">
      {artistDataMap}
      </aside>
      <aside className="card-wrapper">
      {showTheCards}
      </aside>
    </aside>
  );
};
export default App;

codesandbox：https：//codesandbox.io/embed/compassionate-satoshi-iq3nc?fontsize=14

Answer 1

您可以尝试像OnClick Handler具有合成事件一样尝试重构代码。添加此事件听众作为课程的一部分。使用箭头函数，以便您不需要在构造函数内绑定此功能处理程序。获取数据后，尝试将状态设置为结果，并使用状态将HTML标记在渲染方法中呈现。当我运行此代码时，我还看到了一个错误的子元素需要关键属性的错误。我已经看到您正在使用array.prototype.map渲染方法，但是当您返回内部的跨度元素时，请尝试添加一个键属性，以便当React扩散算法遇到一个新元素时，会降低时间复杂性，以便与某些节点一起检查某些节点。此关键属性。

Answer 2

useEffect(() => {
   // call the functions which depend on fullResults here
   setFullResults();
}, [fullResults])

//现在它将检查 fullResults 是否更改，如果更改，是否比内部的呼叫函数> useeffect ，它取决于 fullResults