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]时，它给我未定义的位置（我尝试将其强制转换为字符串）。我真的不知道该怎么办，甚至花了整整一个上午的时间与其他2个朋友尝试解决此问题，请记住，我们都在学习React，而我们只使用React钩子，而不是类。

Answer 1

您的代码有一些问题：

const objectID = new Object();都会声明一个新的objectId。您希望它是持久的。因此，useState可以保存它，或者useRef。

类似const objectID = useRef({})

当其中一个依赖项更改（状态，道具）时，您的模板将被重新渲染。您正在更新objectID，但不更新任何状态，因为这样不会进行渲染。

如果在完成所有调用后将加载更新为true，则应该能够解决此问题。

即使创建对象也未定义

1 个答案: