TypeError: Cannot set property 'name' of undefined on "onChange" event using React-Sortable-hoc

Question

当我尝试在任何输入表单字段上输入数据时，出现“类型错误：无法设置属性 'name' 和 'quantity' 未定义”。

这始于我应用 React-Sortable HOC 库以能够拖放每个列表项进行排序。

查看完整代码： https://codesandbox.io/s/sortable-list-wfpbk?file=/src/AddItem.js

 
 const [inputList, setInputList] = useState([{ name: "", quantity: "" }]);
 
 // handle input change
  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
  };
  
   const shoppingList = inputList.map((element, i) => {
      <div className="form" key={i}>
        
        <input
          className="form-field item-form-field"
          name="name"
          placeholder="Name"
          value={element.name}
        />
        <input
          className="form-field item-form-field"
          type="number"
          name="quantity"
          placeholder="Amount"
          // className="ml10"
          min="1"
          max="12"
          value={element.quantity}
        ></input>
        {inputList.length !== 1 && (
          <button className="remove-btn remove-btn-3 remove-btn-sep"> Remove</button>
        )}
      </div>
  })

  const SortableItem = SortableElement(({value, index}) => (
    
    <div className="form">
      <DragHandle />
    <input
      className="form-field item-form-field"
      name="name"
      placeholder="Name"
      value={value.name}
      onChange={(e) => handleInputChange(e, index)}
      
    />
    <input
      className="form-field item-form-field"
      type="number"
      name="quantity"
      placeholder="Amount"
      min="1"
      max="12"
      value={value.quantity}
      onChange={(e) => handleInputChange(e, index)}
    ></input>
    {inputList.length !== 1 && (
      <button className="remove-btn remove-btn-3 remove-btn-sep"
        onClick={() => handleRemoveClick(index)}
      >
      Remove
      </button>
    )}
  </div>

Answer 1

嘿，看看下面的代码和框link，你的问题已经解决了。

Link: https://codesandbox.io/s/sortable-list-forked-ne6hp?file=/src/AddItem.js

问题出在 sortableElement 上，它不接受 index 作为 prop。看起来索引在 SortableElement 中被显式省略了。

所以，我传下了另一个道具，其名称类似于 indexTemp={index}.

TypeError: Cannot set property 'name' of undefined on "onChange" event using React-Sortable-hoc

TypeError: Cannot set property 'name' of undefined on "onChange" event using React-Sortable-hoc

javascript

reactjs

undefined

react-sortable-hoc