React中点击表格单元格修改对应值功能失效如何解决？

• onClick事件不是仅支持按钮，<td>标签完全可以绑定onClick事件，你控制台能输出clicked就已经证明事件绑定是生效的，之所以没达到预期效果是以下两个核心问题：
  1. 你定义的cache是普通局部变量，不属于React状态，React不会追踪它的变更，哪怕你改了这个变量的值，也不会触发组件重渲染，界面自然不会更新。
  2. <td>不是表单输入类元素，本身没有标准的value属性，你直接修改e.target.value既不会同步到原始的cache数组，也不会改变td的渲染内容，因为td显示的内容完全来自你遍历的cache数组的值。
• 你这个场景不需要使用useEffect，useEffect是用来处理状态变更后的副作用逻辑的，单纯的点击修改状态场景完全用不到。

把cache声明为React状态，点击时传入当前单元格对应的下标，更新状态数组对应位置的值即可触发重渲染，代码示例如下：

import { useState } from 'react'

function Cache() {
    // 把数组声明为state
    const [cache, setCache] = useState([0, 0, 0, 0, 0])

    const clickHandler = (index) => {
        // 生成新数组更新state，触发重渲染
        setCache(prev => {
            const newCache = [...prev]
            newCache[index] = 42
            return newCache
        })
        console.log('clicked')
    }

    return (
        <div>
            <table>
                <tr>
                    {cache.map((value, index) => {
                        // 绑定点击事件时传入当前下标
                        return <td key={index} onClick={() => clickHandler(index)} > {value} </td>
                    })}
                </tr>
            </table>
        </div>
    )
}

如果需要点击后出现输入框修改为自定义值，只需要在点击时记录当前编辑的下标，渲染时判断当前下标是否是编辑中状态，渲染input即可，不需要额外引入复杂的第三方库。

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