如何绕过 React setState 延迟？

Question

我一直停留在常见的 React setState 延迟的简单问题上。我目前正在寻找更新数组中的对象，方法是将其保存到子组件中的状态变量“newStud”，并将其传递到父组件以用于过滤功能。我当前的问题是，只有在我的网站上第二次提交条目后，状态才会完全更新。因此，当父组件中的过滤器函数旨在读取传入的数组时，它会抛出错误，因为传入的是初始状态声明。我的问题是是否有某种方法可以调整更新延迟无需将较大的组件分解为更小的更易于管理的组件即可获得这些信息？

作为参考，这是我用于子组件的代码（问题出现在我的“addTag”函数中）：

import React, {useState, useEffect} from 'react';
import './studentcard.css';

import { Tags } from '../Tags/tags.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { faMinus } from '@fortawesome/free-solid-svg-icons';


export function StudentCard({student, upStuds}) {
  const [newStud, setNewStud] = useState({});
  const [clicked, setClicked] = useState(false);
  const [tag, setTag] = useState('');

  // switches boolean to opposite value for plus/minus icon display
  const onClick = () => {
    setClicked(!clicked);
  };

  // triggers the addTag function to push a tag to the array within the student object
  const onSubmit = async (e) => {
    e.preventDefault();
    
    await addTag(tag);
  };

  // captures the values being entered into the input 
  const onChange = (e) => {
    setTag(e.target.value);
  };

  // this pushes the tag state value into the array that is located in the student object being passed down from the parent component
  // it is meant to save the new copy of the "student" value in "newStuds" state variable, and pass that into the callback func
  // ********** here is where I am experiencing my delay ************
  const addTag = () => {

    student.tags.push(tag);
    setNewStud({...student});
    upStuds(newStud);

    setTag('');
  };

  let scores;
  if (clicked !== false) {
   scores = <ul className='grades-list'>
      {student.grades.map((grade, index) => <li key={index} className='grade'>Test {(index + 1) + ':'}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{grade}%</li>)}
    </ul>;
  } 

  return (
    <div className='studentCard' >
      <div className='pic-and-text'>
        <img className='student-image' alt='' src={student.pic}></img>
        <section className='right-side'>
            <h3 id='names'>{student.firstName.toUpperCase() + ' ' + student.lastName.toUpperCase()}</h3>
            <h4 className='indent'>Email: {student.email}</h4>
            <h4 className='indent'>Company: {student.company}</h4>
            <h4 className='indent'>Skill: {student.skill}</h4>
            <h4 className='indent'>Average: {student.grades.reduce((a, b) => parseInt(a) + parseInt(b), 0) / student.grades.length}%</h4>
            {scores}
            <Tags student={student}/>
            <form className='tag-form' onSubmit={onSubmit}>
              <input className='tag-input' type='text' placeholder='Add a tag' onChange={onChange} value={tag}></input>
            </form>
        </section>
      </div>  
         <FontAwesomeIcon icon={clicked !== false ? faMinus : faPlus} className='icon' onClick={onClick}/>
    </div>
  )
};

如有必要，这是试图接收更新信息的父组件（我用来从子组件获取信息的回调函数称为“upStuds”）：

import React, {useState, useEffect} from 'react';
import './dashboard.css';

import {StudentCard} from '../StudentCard/studentcard';

import axios from 'axios';

export function Dashboard() {
    const [students, setStudents] = useState([]);
    const [search, setSearch] = useState('');
    const [tagSearch, setTagSearch] = useState('');

    useEffect(() => {
      const options = {
        method: 'GET',
        url: 'https://api.hatchways.io/assessment/students'
      };

      var index = 0;
      function genID() {
        const result = index;
        index += 1;

        return result;
      };

      axios.request(options).then((res) => {
        const students = res.data.students;
        const newData = students.map((data) => {
          const temp = data;

          temp["tags"] = [];
          temp["id"] = genID();
          return temp;
        });

        setStudents(newData);
      }).catch((err) => {
        console.log(err);
      });
    }, []);

    const onSearchChange = (e) => {
      setSearch(e.target.value);
    };

    const onTagChange = (e) => {
      setTagSearch(e.target.value);
    }; 
    
    // here is the callback function that is not receiving the necessary information on time
    const upStuds = (update) => {
      let updatedCopy =  students;

      updatedCopy.splice(update.id, 1, update);

      setStudents(updatedCopy);

    };

    // const filteredTagged = tagList.filter
  return (
    <div className='dashboard'>
      <input className='form-text1' type='text' placeholder='Search by name' onChange={onSearchChange}></input>
      <input className='form-text2' type='text' placeholder='Search by tag' onChange={onTagChange}></input>

      
      {students.filter((entry) => {
        const fullName = entry.firstName + entry.lastName;
        const fullNameWSpace = entry.firstName + ' ' + entry.lastName;
        if (search === '') {
          return entry;
        } else if (entry.firstName.toLowerCase().includes(search.toLowerCase()) || entry.lastName.toLowerCase().includes(search.toLowerCase()) 
        || fullName.toLowerCase().includes(search.toLowerCase()) || fullNameWSpace.toLowerCase().includes(search.toLowerCase())) {
          return entry;
        }
      }).map((entry, index) => {
        return (<StudentCard student={entry} key={index} upStuds={upStuds} />)
      })}
    </div>
  )
};

如果我需要澄清任何事情，请告诉我！感谢您的帮助！

Answer 1

setNewStud({...student});
upStuds(newStud);

如果你想将新的状态发送给upStuds，你可以将它赋值给一个变量并使用它两次：

const newState = {...student};
setNewStud(newState);
upStuds(newState);

此外，您需要更改 upStuds 函数。它目前正在改变现有的学生数组，因此当您设置学生时不会发生渲染。您需要复制数组并编辑副本。

const upStuds = (update) => {
  let updatedCopy = [...students]; // <--- using spread operator to create a shallow copy
  updatedCopy.splice(update.id, 1, update);
  setStudents(updatedCopy);
}

如何绕过 React setState 延迟？

How to get around React setState Delay?

javascript

reactjs

react-state