主页 / 问题 / 1010721
Accepted
Timur Musharapov
Asked:2020-08-06 19:30:54 +0000 UTC2020-08-06 19:30:54 +0000 UTC

来自 componentDidMount 的 React In 渲染数据未定义

  • 772

无法在渲染中操作数据，这很奇怪。

编码：

class Pagination extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(this.props);
    const { id, count } = this.props;

    let pages;
    if (count != 0) {
      pages = Math.ceil(count / 12);
    }
  }

  render () {
    console.log(this.pages); // undefined, в componentDidMount все нормально

    ...

我错过了什么？

reactjs

2 个回答

  1. Best Answer

    事实证明是这样的，因为该方法从一开始就起作用render（在其中this.pages它仍然undefined）然后componentDidMount。因此，它返回undefined循环，请参阅安装部分

    在此处输入图像描述

    以及为什么要在 pages内部使用变量声明componentDidMount。state尽量避免使用此类代码。

    • 2

  2. 退出 componentDidMount 后，您的页面不会保存在任何地方。有必要将 let pages 保存到本地状态，然后在渲染器中获取它。这是一个关于钩子的例子：

    import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Component count={154}/>
    </div>
  );
}

function Component(props) {
  const [pages, setPages] = useState(0);
  useEffect(() => {
    const {count} = props;
    if (count !== 0) {
      setPages(Math.ceil(count / 12));
    }
  }, [props]);
  return (<>{pages}</>)
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
    • 1

相关问题