53226

Blazor - Compare Previous and Next State

<h3>Question</h3>

I have a table of students in Blazor, which is coming from an api, and I am also receiving a pushed data to update the students info which is basically the score upon a change in the database, the push is working fine and the score is being updated but I also want to change the background colour of the field that has been updated in the table upon a change in the score to red just the td tag for few sec, my code is as follow:

@foreach(var student in SS.GetStudents()){ <tr> <td> student.name </> <td> student.section </> // trying to compare between the previous and next state var stud = SS.GetStuentsCopy().SingleOrDefault(s =>s.Id == student.Id); var color = ""; if(stud.score != student.score){ color = red; } <td class="@color"> student.score </> </tr> } @code{ [Inject] public StudentsStates SS { get; set;} public StudentsResponse Students { get; set; } protected override async Task OnInitializedAsync() { // Subscribe to the StateChanged EventHandler SS.StateChanged += SSAdvancedStateChanged; Students = await Service.GetStudents(); // update the students and the copy together SS.UpdateStudents(Students) SS.UpdateStudentsCopy(Students) //upon receiving students updated score hubConnection = new HubConnectionBuilder() .WithUrl(NavigationManager.ToAbsoluteUri("/studhub")) .Build(); hubConnection.On<StudentsResponse>("ReceiveMessage", s => { // update the students after 3 sec update the copy SS.UpdateStudents(s); //Here the state is not being updated // unless there is a new push // or the issue might be in rendering // FYI without the sleep also I can see the changes in the color System.Threading.Thread.Sleep(3000); SS.UpdateStudentsCopy(s); } }}

StudentsStates.cs

namespace Ctrl.Web.Data { public class StudentsStates { public StudentsResponse Students { get; set; } public StudentsResponse StudentsCopy { get; set; } public StudentsResponse GetStudents(){return Students;} public StudentsResponse GetStudentsCopy(){return StudentsCopy;} public void UpdateStudents(Students students){ Students = students;} public void UpdateStudentsCopy(Students students){ StudentsCopy = students;} }}

As I said above everything is working fine except when there is a multiple push in a sec, the first pushed student score's background color is being changed too fast, sometimes u won't even notice it because of the pushed data and state is being updated, what I want is to slow down the background color without effecting the next pushed student score or if there is a better approach to this scenario, your answers are highly appreciated.


<h3>Answer1:</h3>

I would suggest creating a component for the student row as follow:

@foreach(var student in SS.GetStudents()) { <StudentRow Student={student} /> }

Then inside the StudentRow component u can create a new private student variable where u update it after a delay of 3sec and do the comparison there, Instead of saving the ids in a list or in another copy:

StudentRow.razor

<tr> <td> Student.name </> <td> Student.section </> var color = ""; if(StudentCopy.score != Student.score){ color = red; } <td class="@color"> student.score </> </tr> @code{ public StudentResponse StudentCopy { get; set; } [Parameter] public StudentResponse Student { get; set; } protected override async Task OnParametersSetAsync() { await Task.Delay(3000); StudentCopy = Student; } }

OnParametersSetAsync method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties. Read more here

来源:https://stackoverflow.com/questions/62087832/blazor-compare-previous-and-next-state

Recommend

  • Blazor - Compare Previous and Next State
  • Checking instance of non-class constrained type parameter for null in generic method
  • Spring 3..0.5 + hierbnate 3.6.6.final + jboss as 7 Database access
  • What I can use subquery instead for search MAX()?
  • Processing dynamic MP3 URL
  • can you use embedded ruby in custom javascript files in rails?
  • Videos won't upload
  • Write to elasticsearch from spark is very slow
  • How to put an object in the air?
  • How do I set the logging properties in a spring java configuration?
  • Defer unused CSS
  • Unity Resources.load() won't work with external dll
  • Implementation of timeout in LDAP
  • Getting Microsoft Calibri font on Amazon EC2 ubuntu
  • Android studio import problems. (Apktool)
  • view details for exception in vs 2017
  • Use AutoIt with java applications
  • content must have a ListView whose id attribute is 'android.R.id.list'
  • opencv deskewing a contour
  • How to select multiple items from a List view - JavaFX 8
  • Controller or RestController
  • how to specify different css for ie
  • Floating parent div grows to hypothetical width of floating child div
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • Will this work on all screen sizes?
  • How to integrate angular2-material (alpha 8.2) with angular2-Quickstart app
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Functions by reference or by variable, which to use when?
  • Comma decimal separator is ignored by ASP.NET MVC model binder
  • Apple Mach-O Linker error (“duplicate symbol”)
  • Codeigniniter insert data through models and controller
  • Angular FormGroup won't update it's value immediately after patchValue or setValue
  • PHP Permalinks.. how to change?
  • Spring Boot not autowiring @Repository
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • ARKit code issue {unknown error -1=ffffffffffffffff error: Task failed with exit 1}