Javascript 为什么映射函数中的元素不呈现？ 总结问题 我在Gatsby JS站点中有一个页面，通过提供程序接受状态，其中一些活动可以使用，但是，我无法通过上下文提供的映射函数提供内容 预期结果：映射函数中的预期元素将呈现 实际结果：未呈现相关元素 没有错误消息 描述一下你的尝试 我认为问题并没有明确地在相关的箭头函数中输入return，但这不会改变任何输出 此外，我没有尝试直接在页面上访问该方法（通过上下文提供程序），而是将该方法直接移动到提供程序挂钩中。这并没有改变任何渲染 显示一些代码

这里是Provider.js

import React, { useState, useEffect } from 'react';
import he from 'he';

export const myContext = React.createContext();

const Provider = props => {
    const [state, setState] = useState({
        loading: true,
        error: false,
        data: [],
    });
    const [page, setPage] = useState(1);
    const [score, setScore] = useState(0);
    const [correctAnswers, setCorrectAnswers] = useState([]);
    const [allQuestions, setAllQuestions] = useState([]);
    const [answers, setAnswers] = useState([]);
    const [right, setRight] = useState([]);
    const [wrong, setWrong] = useState([]);
    function clearScore() {
      updatedScore = 0;
    }
    function clearRights() {
      while (rights.length > 0) {
        rights.pop();
      }
    }
    function clearWrongs() {
      while (wrongs.length > 0) {
        wrongs.pop();
      }
    }
    let updatedScore = 0;
    let rights = [];
    let wrongs = [];
    const calcScore = (x, y) => {
      for (let i = 0; i < 10; i++) {
        if (x[i] === y[i]) {
          updatedScore = updatedScore + 1;
          rights.push(i);
        } else wrongs.push(i);
    }
}
    useEffect(() => {
        fetch('https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean')
          .then(response => {
            return response.json()
          })
          .then(json => {
            const correctAnswer = json.results.map(q => q['correct_answer']);
            const questionBulk = json.results.map(q => q['question']);
            setState({
              data: json.results,
              loading: false,
              error: false,
            });
            setCorrectAnswers(correctAnswers.concat(correctAnswer));
            setAllQuestions(allQuestions.concat(questionBulk));
          })
          .catch(err => {
            setState({error: err})
          })
    }, [])
    return (
        <myContext.Provider
            value={{
              state, page, score, answers, right, wrong,
              hitTrue: () => {setAnswers(answers.concat('True')); setPage(page + 1);},
              hitFalse: () => {setAnswers(answers.concat('False')); setPage(page + 1);},
              resetAll: () => {
                setAnswers([]);
                setPage(1);
                setScore(0);
                setRight([]);
                setWrong([]);
                clearScore();
                clearWrongs();
                clearRights();
              },
              calculateScore: () => calcScore(answers, correctAnswers),
              updateScore: () => setScore(score + updatedScore),
              updateRight: () => setRight(right.concat(rights)),
              updateWrong: () => setWrong(wrong.concat(wrongs)),
              showRightAnswers: () => {right.map((result, index) => {
                return (
                  <p className="text-green-300 text-sm" key={index}>
                    + {he.decode(`${allQuestions[result]}`)}
                  </p>)
              })},
              showWrongAnswers: () => {wrong.map((result, index) => {
                return (
                  <p className="text-red-500 text-sm" key={index}>
                    - {he.decode(`${allQuestions[result]}`)}
                  </p>
                )
              })},
            }}
        >
            {props.children}
        </myContext.Provider>
    );
}

export default ({ element }) => (
    <Provider>
        {element}
    </Provider>
);

---

您正在地图内部返回，但没有返回地图调用本身-

。地图

返回一个数组，您必须从“显示”函数中返回该数组，例如

showWrongAnswers: () => { return wrong.map((result, index) ...
                           ^^^^

---

这将在调用时返回从

showErrorAnswers

函数生成的数组

.map

，因此

{context.showErrorAnswers（）}

将呈现返回的数组您正在地图内部返回，但您没有返回地图调用本身-

.map

返回一个数组，您必须从“show”函数返回该数组，例如

showWrongAnswers: () => { return wrong.map((result, index) ...
                           ^^^^

调用该函数时，它将返回从showErrorAnswers函数生成的数组

.map

，因此

{context.showErrorAnswers（）}

将呈现返回的数组