Question

我创建了一个简单的应用程序，以使用redux和antd库添加用户。添加用户后，我试图显示成功消息。我能够获取更新后的消息，但是当我提醒该消息时，它显示为空白。当我再次单击该按钮时，它将在警报中显示成功消息。

我已经创建了codeandbox链接：https://codesandbox.io/s/admiring-waterfall-v04g9

请帮帮我，我很新来。

Answer 1

这可能发生了什么 -由于回调函数是同步的，因此即使将addUser函数放在警报函数之前，也不能保证在回调函数之前执行addUser函数。

解决方案是按如下所述使您的函数异步，以确保在触发警报之前添加了用户，并因此更新了状态（使用用户和所显示的消息）。确保保存更改并刷新沙盒以对其进行测试。

get_course_list() {
  let data = [];
  firebase.database().ref('Users/CourseApprovals').on('value', snapshot => {
    if (snapshot.exists()) {
       // making sure data exists
       snapshot.forEach(child => {
         let a = child.val();
         // build the object
         let CompleteData = {
           child1: a.comments,
           child2: a.evidence,
           child3: a.selectedTrainer.label,
           child4: a.selectedTrainer.value
         }

         // you are currently doing: data.push({ data: CompleteData })
         // by doing so your data array looks like this:
         // data:[{ data: { child1: '', ... } }, ...]

         data.push(CompleteData)

         // now your array should look like this:
         // data:[{ child1: '', ... }, ...]

       });
       // setState
       this.setState({ data });
       console.log(data);
    }
  })
}

componentDidMount() {
  this.get_course_list();
}

Redux状态已更新，但UI未更新

1 个答案: