JSX 不输出 JavaScript 数组

Question

我正在尝试使用 JSX 输出此 JavaScript 数组，但当我运行代码时，它在 ul 标记内没有返回任何内容：

function Quests() {

    const [questsList, setQuestsList] = useState([]); 

    const galxeQuestsURL = 'https://graphigo.prd.galaxy.eco/query';

    let queryBody = JSON.stringify({"operationName":"CampaignList","variables":{"input":{"listType":"Trending","credSources":null,"gasTypes":null,"types":null,"rewardTypes":null,"chains":null,"isVerified":null,"statuses":null,"spaceCategories":null,"backers":null,"first":20,"after":"-1","searchString":null,"claimableByUser":null},"address":"0x955cc96a6ae344bc9d576b62c6cfbb68d3479bb2"},"query":"query CampaignList($input: ListCampaignInput!, $address: String!) {\n  campaigns(input: $input) {\n    pageInfo {\n      endCursor\n      hasNextPage\n      __typename\n    }\n    list {\n      ...CampaignSnap\n      isBookmarked(address: $address)\n      id\n      numberID\n      name\n      childrenCampaigns {\n        id\n        type\n        rewardName\n        rewardInfo {\n          discordRole {\n            guildId\n            guildName\n            roleId\n            roleName\n            inviteLink\n            __typename\n          }\n          __typename\n        }\n        __typename\n      }\n      whitelistInfo(address: $address) {\n        usedCount\n        __typename\n      }\n      watchlistPro {\n        watchListId\n        rewardIconGif\n        rewardIcon\n        rewardCampaign\n        __typename\n      }\n      info\n      useCred\n      formula\n      thumbnail\n      gasType\n      createdAt\n      requirementInfo\n      description\n      enableWhitelist\n      chain\n      startTime\n      status\n      requireEmail\n      requireUsername\n      distributionType\n      endTime\n      rewardName\n      cap\n      loyaltyPoints\n      tokenRewardContract {\n        id\n        address\n        chain\n        __typename\n      }\n      tokenReward {\n        userTokenAmount\n        tokenAddress\n        depositedTokenAmount\n        tokenRewardId\n        tokenDecimal\n        tokenLogo\n        tokenSymbol\n        __typename\n      }\n      space {\n        id\n        name\n        thumbnail\n        alias\n        isVerified\n        __typename\n      }\n      rewardInfo {\n        discordRole {\n          guildId\n          guildName\n          roleId\n          roleName\n          inviteLink\n          __typename\n        }\n        premint {\n          startTime\n          endTime\n          chain\n          price\n          totalSupply\n          contractAddress\n          banner\n          __typename\n        }\n        __typename\n      }\n      participants {\n        participantsCount\n        bountyWinnersCount\n        __typename\n      }\n      recurringType\n      __typename\n    }\n    __typename\n  }\n}\n\nfragment CampaignSnap on Campaign {\n  id\n  name\n  inWatchList\n  inNewYearWatchList\n  ...CampaignMedia\n  dao {\n    ...DaoSnap\n    __typename\n  }\n  __typename\n}\n\nfragment DaoSnap on DAO {\n  id\n  name\n  logo\n  alias\n  isVerified\n  __typename\n}\n\nfragment CampaignMedia on Campaign {\n  thumbnail\n  rewardName\n  type\n  gamification {\n    id\n    type\n    __typename\n  }\n  __typename\n}\n"});

    fetch(galxeQuestsURL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: queryBody,
    })
    .then(response => response.json())
    .then((jsonData) => {
        const tmp = [];
        for (var i=0; i < jsonData.data.campaigns.list.length; i++) {
            tmp.push([
                jsonData.data.campaigns.list[i].name
           ]);
         }

         setQuestsList(tmp);
    
    })
    .catch((error) => {
        // handle your errors here
        console.error('error: ' + error);
    });

    return (
        <div>
            <div className="quests_container">
                <ul>{questsList.map((quests) => <li>{quests}</li>)}</ul>
            </div>
        </div>
    );

}

我怎样才能做到这一点？我在控制台中没有收到任何错误

编辑：我已经根据建议更新了代码以使用 useState，但我现在得到“useState”未定义。我正在使用

import React, { useState } from 'react';

在index.js中但仍然没有运气

Answer 1

你不能只将数据推送到

questsList

并期望 React 渲染列表。

相反，您需要使用状态 useState。

因此，您不需要声明变量，而是需要执行以下操作：

    const [questsList, setQuestsList] = useState([]); 

然后当你循环时，创建一个临时变量来存储你的数组，最后更新你的状态：

       const tmp = []
       for (var i=0; i < jsonData.data.campaigns.list.length; i++) {
            tmp.push([
                jsonData.data.campaigns.list[i].name
           ]);
         }

       setQuestsList(tmp); // this will update the React state