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(() => {

   // call the functions which depend on fullResults here

   setFullResults();

}, [fullResults])

//现在它会检查是否fullResults改变，如果改变不是内部通话功能useEffect这是根据fullResults