React中自定义输入框修改价格后未同步更新books状态数组如何解决

核心问题原因 #

1. 自定义输入组件MyCustomTextInput没有正确绑定传入的value属性，也没有对外抛出输入变更事件，且现有代码存在递归渲染自身的逻辑错误。
2. 父组件未给输入组件传递状态更新的回调方法，输入变更后无法触发books状态修改。
3. 现有渲染代码存在语法错误：变量渲染未加{}、标签闭合错误、列表渲染未加key属性。

具体修改方案 #

1. 修复MyCustomTextInput组件

function MyCustomTextInput(props) {
  // 接收父组件传入的value和变更回调，绑定到输入元素
  return (
    <div>
      <input 
        type="number" 
        value={props.value} 
        onChange={(e) => props.onChange?.(e.target.value)}
      />
    </div>
  ) 
}
export default MyCustomTextInput

若内部要使用你自定义的输入基础组件，替换上述代码中的<input>即可，只要正确绑定value和透传onChange事件就行。

2. 父组件新增状态更新逻辑

在存储books状态的父组件中，新增价格变更处理函数：

const [books, setBooks] = useState([])
// 从接口获取数据后赋值
// setBooks(data)

// 新增价格更新处理函数
const handlePriceChange = (index, newPrice) => {
  setBooks(prevBooks => {
    // 返回全新数组，避免直接修改原状态
    return prevBooks.map((book, i) => {
      if (i === index) {
        // 对应索引的图书返回新对象，更新价格
        return {...book, price: newPrice }
      }
      return book
    })
  })
}

3. 修正渲染逻辑，传递必要属性

修复原渲染代码的语法问题，传入回调属性：

return (
  <div>
    <table>
      <tbody>
        {books.map((x, i) => (
          // 若有bookId等唯一字段优先用唯一字段当key，索引用作备选
          <tr key={i}>
            <td>{x.bookName}</td>
            <td>
              <MyCustomTextInput 
                value={x.price}
                onChange={(newVal) => handlePriceChange(i, newVal)}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
)

注意事项 #

如果books数组中的元素有唯一标识字段（如bookId），不要使用数组索引作为key属性，替换为唯一标识可以避免列表重渲染时出现异常。

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