javascript - React，在 componentDidMount() 中执行 GET 操作后，无法显示 api 接收到的数据

In lại Tác giả: Walker 123 更新时间：2023-11-28 16:48:01 26 4

getUserList() {
    API.get('/userlist')
        .then(response => {
            this.setState({
                userList: response.data
            }, () => {
                console.log(this.state.userList) //I can see this
            });
        })
}

constructor(props) {
    super(props)
    this.state = {
        retracted: false,
        userList: []

    }
    this.getUserList = this.getUserList.bind(this);
}

componentDidMount() {
    this.getUserList();
}

kết xuất() {
    var users = this.state.userList;
    var user = users[0].email //cannot read email of undefined

    console.log(this.state.userList)
    console.log(users)
    trở lại (
        

            

                 
{user}
 
            


        

    )
}

    kết xuất() {
      var users = this.state.userList;

      if (users.length === 0) {
        return 
loading

      }

      return 
{users[0].email}

    }

26 4 0

• javascript - parent 的 componentDidMount 是在所有 children 的 componentDidMount 之后调用的吗？

  我的父渲染中有下面的代码 { this.state.OSMData.map(function(item, index) { return })

• javascript - ComponentDidMount 之外的状态似乎没有更新

  你好，当我在 componentDidMount 方法之外的任何地方控制台记录我的组件的状态时，我发现我的状态充满了空数组，而这些空数组本应被构建。我正在从 JSON 文件和 componentDid

• reactjs - 为什么在我重新渲染时没有调用 componentDidMount？

  我有多个用于注册的模式，但遇到问题。我一共有三个 Action 。首先是注册按钮，然后激活第一个注册模式以注册 google 或 facebook，然后完成模式以获取提供者无法收集的其他信息，将与预先

• reactjs - ComponentDidMount 被调用多次

  我构建了一个 HOC 以在我的应用程序中的 protected 路由上使用。它接收应在路由上呈现的组件，检查用户是否经过身份验证，然后呈现该组件(如果是)。它可以工作，但它会导致组件多次挂载/卸载(与

• reactjs - componentDidMount 和构造函数

  class ProductsIndex extends Component { constructor (props){ super(props); console.log(

• reactjs - `componentDidMount` 到底是什么时候被触发的？

  这是我在使用 React 时经常遇到的问题。 componentDidMount 方法保证在组件第一次渲染时被触发，因此它似乎是进行 DOM 测量(如高度和偏移量)的自然位置。然而，很多时候我在组件生

• javascript - componentDidMount()中接收到数据后调用函数和get方法

  预期效果:在 componentDidMount () 中，我下载 s 并将其保存在变量 timeId 中。如果 timeId 为 true，则将 this.state.timeId 传递给 load

• javascript - 'componentDidMount' 生命周期方法不更新状态

  我有一个名为 DiscardPile 的组件，它在您的 props (props.cards) 中接收如下所示的对象数组: {key: 'key', 'type', suit: 'suit', lab

• javascript - 将变量传递给 componentDidMount

  我正在尝试更新 componentdidmount 中的 fetch API 调用以匹配 React 中的输入，但我很难将输入传递到 URl 的模板文字中。有人可以解释一下吗？ 代码- search(

• javascript - componentDidMount 同步更新

  我正在使用以下方式从保存的 session 中加载数据: componentDidMount() { if (JSON.parse(localStorage.getItem('savedDat

• javascript - componentDidMount 上的条件状态清除

  我在这里面临并提出问题，我想要第二个意见。当我的应用程序的第一页呈现时，出于安全原因我想清除我的状态，因此在我的布局类组件中我编写: componentDidMount() { this.pr

• javascript - componentDidMount 未按预期执行

  đóng cửa. Câu hỏi này không thể lặp lại được hoặc do lỗi chính tả. Hiện tại nó không chấp nhận câu trả lời. Sự cố này xảy ra do lỗi đánh máy hoặc sự cố không thể sao chép được nữa. Mặc dù một câu hỏi tương tự có thể được đưa lên hàng đầu

• javascript - componentDidMount 未被调用

  我正在调用 ajax 请求 this.props.getPostListData(this.props.lang) 并出现错误。然后我发现它是 componentDidMount 的罪魁祸首。 我的

• javascript - componentDidMount 中的函数没有未使用的表达式

  如何修复或禁用 ESLint 以忽略 [eslint] Expected an assignment or function call and instead saw an expression. (

• javascript - componentDidMount 生命周期方法中的条件异步操作不断循环

  我正在使用连接到 API 的 redux 和 sagas 开发一个 React 应用。 有一个表单组件有两个下拉字段:一个 Program 和一个 Contact 字段。该表单设计的工作方式是，当用户

• javascript - 中止先前运行的异步 componentDidMount

  我们有一个连接到 redux 存储的组件，它具有以下 componentDidMount 定义: async componentDidMount() { const page = await fe

• javascript - componentDidMount 不渲染

  我有一个 Header 组件，假设在用户登录的情况下呈现他的子组件。它通过 session 存储识别条件。我试图通过控制渲染componentDidMount: renderUserHeader =

• javascript - componentDidMount() 不工作但命中调试器

  这是我第一次在这里发帖，所以我很乐意接受对我发帖方式和帖子本身的评论。我学习编程才 8 周，所以可能有很多错误。 在这种情况下，我特别需要以下代码方面的帮助。 // import React, { C

• javascript - ComponentDidMount 等不会按顺序触发函数

  我注意到 componentDidMount 有时不会按顺序触发。 componentDidMount(){ function1(); function2(); function3(); } 我

• javascript - ComponentDidMount 中的执行顺序

  我有一个问题: 我在 componentDidMount() 中编写了 4 个函数，但我注意到编写这些函数的顺序不受尊重。 componentDidMount() { this.checkPe