React Hooks：useState with onClick 只更新第二次点击按钮？

Question

忘记了一个重要的部分 - 如果您单击 Jeff A. Menges 旁边的按钮并检查控制台日志，这会很明显。

代码的重要部分是按钮代码的onClick中的“setFullResults(cardResults.data.concat(cardResultsPageTwo.data))”行。我认为它应该将 fullResults 设置为我告诉它的任何内容......除非它在你第一次点击它时不起作用。每次之后，它都有效，但不是第一次。这对下一组来说会很麻烦，因为我无法映射未定义的数组，而且我不想告诉用户只需单击按钮两次即可出现实际搜索结果。

我猜 useEffect 会起作用，但我不知道如何编写它或将它放在哪里。它显然不能在 App 功能组件的顶部工作，但是我尝试将它放在其他任何地方都会给我一个错误。

我已经尝试过“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}`)

                })

                }

Answer 1

您可以尝试重构代码，例如 onClick 处理程序具有合成事件。将此事件侦听器添加为类的一部分。使用箭头函数，这样你就不需要在构造函数中绑定这个函数处理程序。获取数据后，尝试将状态设置为结果，并使用该状态在 render 方法中呈现 HTML 标记。当我运行此代码时，我还在控制台中看到了一个错误，即子元素需要 key 属性。我已经看到您在渲染方法中使用 Array.prototype.map，但是当您返回内部的 span 元素时，尝试添加一个关键属性，以便当 React diffing 算法遇到新元素时，它会降低检查某些节点的时间复杂度这个关键属性。

Answer 2

useEffect(() => {&nbsp; &nbsp;// call the functions which depend on fullResults here&nbsp; &nbsp;setFullResults();}, [fullResults])//现在它会检查是否fullResults改变，如果改变不是内部通话功能useEffect这是根据fullResults