ReactJS DOMException：无法在“节点”上执行“ insertBefore”

Question

categoryInfo是一个对象数组。调用API readRelationById时，如果在数据库中添加或删除了某些内容，它将重新加载对象数组。添加新对象或将其从列表中删除时出现错误。

getInfo = id => {
  Api.readRelationById(id)
    .then(res => this.setState({ categoryInfo: res }))
    .catch(err => console.log(err));
};

列表的呈现方式：

<select
  multiple
  onChange={onRemoveChange(props)}
  size="10"
  style={{ width: "500px" }}
>
  {props.categoryInfo !== undefined ? (
    props.categoryInfo.map((item, index) => {
      return (
        <option value={item.id} key={index}>
          {item.id} {item.description}
        </option>
      );
    })
  ) : (
    <option disabled> N/A </option>
  )}
</select>;

错误消息：

  

NotFoundError：无法在“节点”上执行“ insertBefore”：节点   在此之前要插入新节点的节点不是此节点的子节点   节点。

RemoveChange

const onRemoveChange = (props) => (e) => {
    let options = e.target.options;
    let value = [];
    for (let i = 0, l = options.length; i < l; i++) {
        if (options[i].selected) {
            value.push(options[i].value);
        }
    }
    console.log(value);
    props.onListClick(value);
};

    onListClick = (values) => {
        this.setState({removeList: values});
    };