Объект не определен даже при мысли, что он был создан

Question

Может кто-нибудь объяснить, почему этот объект дает мне неопределенный, даже если я подумал, что console.log только что дал мне полный объект?

    export default function ListForms() {
  const classes = useStyles();

  // Get the ID from the URL
  const { id } = useParams();

  // Hooks
  const [forms, setForms] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const objectID = new Object();

  useEffect(() => {
    // Create an scoped async function in the hook
    async function fetchData() {
      var forms_response = await api
        .get(`/user/list/${id}`)
        .then(function(forms_response) {
          setForms(forms_response.data);

          const id_response = Object.keys(forms_response.data).forEach(function(
            item
          ) {
            var formID = forms_response.data[item].id;
            var answer = api
              .get(`/answerNumber/${formID}`)
              .then(function(answer) {
                objectID[item] = answer.data.answerNumber;
              });
          });
          console.log(objectID);
          setIsLoading(true);
        });
    }

    // Execute the created function directly
    fetchData();
  }, []);

  // function getAnswer (formID) {
  //   var answer = api.get(`/answerNumber/${formID}`)
  //       .then(function(answer) {
  //         console.log(answer.data.answerNumber);
  //         setResponse (answer.data.answerNumber);
  //       });
  // }
  return isLoading ? (
    <div>
      <Tab />
      <Container>
        <Grid container spacing={3}>
          {Object.keys(forms).map((item, i) => (
            <Grid item xl={4} lg={4} md={4} sm={6} xs={12} zeroMinWidth>
              <CardForm
                title={forms[i].title}
                description={forms[i].description}
                numberOfAnswers={objectID[i]}
              ></CardForm>
            </Grid>
          ))}
        </Grid>
      </Container>
    </div>
  ) : (
    <h1></h1>
  );
}

Что происходит, так это то, что console.log распечатывает это:

{}
​
0: 2
​
1: 3
​
2: 4
​
3: 1
​
<prototype>: Object { … }

Что верно, но когда я пытаюсь использовать objectID[i], это дает мне неопределенное значение ( Я попытался привести это к последовательности, чтобы быть уверенным). Я действительно не знаю, что еще делать, и даже провел все утро с двумя другими друзьями, пытаясь решить эту проблему, имейте в виду, что мы все изучаем React, и мы используем только ловушки React, а не классы.

Answer 1

Есть несколько проблем с вашим кодом:

1. const objectID = new Object(); объявит новый objectId каждый раз, когда функциональный компонент будет перерисован. Вы хотите, чтобы это было постоянным. Так что либо useState, чтобы сохранить его, либо useRef .

Примерно так const objectID = useRef({})

Ваш шаблон будет перерисован при изменении одной из зависимостей (состояний, реквизитов). Вы обновляете objectID, но не обновляете никакое состояние, так как такое отображение не выполняется.

Вы сможете исправить это, если обновите загрузку до true, когда все вызовы сделал.