React中useState绑定的input输入变更时state不更新问题

你这段代码的核心问题是直接修改了原state的引用，没有返回全新的state对象，React对state的更新采用浅比较引用的逻辑，只要引用地址没有变化，就会判定state没有变更，不会触发组件重渲染。
你写的var newState = state只是把原数组的引用赋值给了newState变量，后续修改数组内对象的value属性、最终返回newState，本质上返回的还是原来的state数组，因此React不会触发更新。

直接修改updateAnswerValue函数，遵循state不可变原则，返回全新的数组对象，对应位置的对象也需要做浅拷贝再修改属性：

export const updateAnswerValue = ({ event, setProceduralAnswers, answer_index }) => {
    setProceduralAnswers(state => {
        // 浅拷贝原数组，得到新的数组引用
        const newState = [...state]
        // 对应位置的对象也做浅拷贝，再修改value属性
        newState[answer_index] = {
            ...newState[answer_index],
            value: event.target.value
        }
        // 返回全新的数组
        return newState
    })
}

• 不需要用filter查找对应下标的元素，直接通过数组下标访问即可，性能更高
• 后续所有state修改都遵循不可变原则，只要修改state就返回全新的引用，不要直接修改原state的任何属性
• 如果数组元素后续会新增更多属性，当前的浅拷贝写法也可以兼容，无需调整逻辑

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