1

我目前正在根据我的组件状态映射网络组件内的节点和边。当我的组件加载时，画布似乎正在正确渲染网络，但是一旦我更改状态，一些旧节点就会被保留，当我的状态恢复到其原始设置时，无法添加项目，因为 id 的已经存在

错误：无法添加项目：在 o._addItem (vis-network.min.js:4175) 的 o.add (vis-network.min.js:3889) 的 t.value (Node.js :147) 在 Fs (react-dom.production.min.js:5351) 在 Is (react-dom.production.min.js:5099) 在 Ps (react-dom.production.min.js:5066) 在 Ts (react-dom.production.min.js:5001) 在 ts (react-dom.production.min.js:4927) 在 Object.enqueueSetState (react-dom.production.min.js:2891) 在 tCsetState (react.生产.min.js:72)

在 componentDidMount 上，我有一个事件监听器，一旦我的边和节点映射完成，我就会触发一个获取和解析结果的方法（最终创建节点和边），我将状态设置为更新节点和边的“新状态” ，在渲染器中，我有两个变量，一个用于节点，另一个用于边缘。

componentDidMount(){
      SomePackage.$$(ContainerDom).on("success", (e, args) => {
          this.getResultNodes(args.results.results).then( value =>{
            this.setState({
                cResultList : value.cResultList,
                nodes: value.nodesArray,
                edges: value.edgeArray
            });
          })
        });
    }

渲染器

render() {
      const nodes = this.state.nodes.map(item => (
        <Node id={item.id} label={item.label} group={item.group}/>
      ))
      const edges = this.state.edges.map(item => (
        <Edge id={item.id} from={item.from} to={item.to}/>
        ))

        return (
              <div className="skill-container">
                <Network className="container" >
                  { nodes }
                  { edges }
                </Network>
              </div>
        );
    }

我原以为画布会重新渲染自己并清除过去的节点和边缘，但是，情况似乎并非如此，这可以解释带有重复 ID 的错误消息。

所以，要么这是图书馆的问题，要么是我在我的方法中没有正确地做某事。有人会根据提供的详细信息知道以上哪一项吗？

4

1 回答 1

1

dargh - 经过进一步的故障排除，终于发现我的状态没有完全重新初始化，所以我清除了它以确保旧值不再存在（我仍然不知道为什么它们首先会持续存在。）

const initialState =  { cResultList : [], nodes: [], edges: [] };
componentDidMount(){
  SomePackage.$$(ContainerDom).on("success", (e, args) => {
      this.getResultNodes(args.results.results).then( value =>{
      this.state = { cResultList : [], nodes: [], edges: [] };
        this.setState({
            cResultList : value.cResultList,
            nodes: value.nodesArray,
            edges: value.edgeArray
        });
      })
    });
}
于 2019-02-22T18:37:03.037 回答