React点击按钮更新useState数组状态滞后及自定义组件onClick绑定失效问题

• 原因：React中useState的更新方法是异步批量执行的，调用setItems后，当前渲染闭包内的items还是本次渲染的旧值，需要等待组件完成重渲染后，下一次函数执行时才会拿到更新后的items，属于React的正常更新逻辑，并非非响应式问题。
• 解决方法：
  1. 如果需要在数组更新后执行后续逻辑，可以用useEffect监听items的变化，同时推荐用函数式更新避免依赖旧状态导致的错误：

  import React, {ReactElement, useState, useEffect } from "react";
  
  // ...其余导入代码保持不变
  const addItem = (val:any) => {
      setItems(prev => [...prev, val])
  }
  // 监听items变化，执行更新后的操作
  useEffect(() => {
      console.log('更新后的items :', items)
      // 其他需要在items更新后执行的逻辑写在这里
  }, [items])
  

  2. 如果只是需要临时验证更新结果，也可以直接打印你传给setItems的新数组：console.log('即将更新的items:', [...items, val])

• 原因：自定义React组件不会默认处理DOM事件，你直接给Employee组件传的onClick只会作为普通props传递，没有被绑定到组件内部的真实DOM节点上，因此不会触发。
• 解决方法：
  第一步：修改Employee组件，接收onClick props并绑定到最外层的Card节点，这里同时推荐给TS加上明确类型定义替代any，更符合开发规范：

  import React from "react";
  import {MediaContainer} from "@react-md/media";
  import styles from './employee.module.scss'
  import { Card, CardContent, CardHeader} from "react-md";
  
  interface EmployeeProps {
    name: string;
    role: string;
    markets: string[];
    image: string;
    onClick?: () => void;
  }
  function Employee(props: EmployeeProps) {
     return (
          <Card className={styles.emp_card} onClick={props.onClick}>
              <CardHeader>
                  <div className={styles.emp_text}>
                      <p key={props.name}>Name:&nbsp; {props.name}</p>
                      <p key={props.role}>Title:&nbsp; {props.role}</p>
                      <p key={props.markets}>Markets:&nbsp; {props.markets[0]} {props.markets[1] && <span>and {props.markets[1]}</span>}</p>
                  </div>
              </CardHeader>
              <CardContent>
                  <MediaContainer>
                      <img key={props.image} src={props.image} alt="employee"/>
                  </MediaContainer>
              </CardContent>
          </Card>
      )
  }
  
  export default Employee;
  

  第二步：修改Home组件的渲染逻辑，去掉外层多余的div，直接给Employee绑定onClick即可：

  <section className={styles.emp_list}>
      {model.map((props, index) => (
          <Employee 
              key={index} 
              name={props.name} 
              role={props.role} 
              markets={props.markets} 
              image={props.image}
              onClick={() => addItem(props.name)}
          />
      ))}
  </section>
  

内容的提问来源于stack exchange，提问作者Michael Kaufman