javascript - 单击时无法将不同元素的 id 添加到状态数组

Question

我正在尝试将 svg 圆圈的 id 设置为单击时状态。

我预计 ID(假设为 1、2 和 3)将被设置为状态数组:[1, 2, 3]

发生的情况是，当我单击圆圈 1 时，数组如下所示:[1] 正如预期的那样。当我继续单击圆圈 2 时，数组包含 [2] 而不是预期的 [1, 2] 。如果我继续继续并再次单击圆圈 1，该数组将类似于 [1, 1]。因此数组总是包含一个或多个相同的项，但拒绝推送不同的项，例如 [1, 3]

我尝试使用 concat、push 和 spread 运算符将 id 添加到状态数组，所有这些都具有与上述相同的意外结果。

我在构造函数中设置初始状态:

constructor(props) {
    super(props);
    this.state = { array: [] };
}

并尝试使用 concat 将项目添加到状态数组:

test = (e) => {
    const currentArray = this.state.array;
    const newArray = currentArray.concat(e.currentTarget.__data__.id);
    this.setState({ array: newArray }, () => console.log(this.state.array));
};

和扩展运算符:

test = (e) => {
    let newArray = this.state.array.splice();
    newArray.push(e.currentTarget.__data__.id);
    this.setState(prevState => ({
        array: [...prevState.array, newArray ]
    }), () => console.log(this.state.array));
};

这是圆形元素:

<circle onClick={this.test.bind(this)}/>

我设法通过将数组设置为变量并在单击时将 ids 插入其中来实现此目的。但对于 React，使用状态来做到这一点似乎是有意义的。我希望你能告诉我我做错了什么。

更新 - 父组件中的圆圈映射:

const nodes = this.state.nodes.map( (node) => {
    return (
        <Node
            nodeClass={this.props.nodeClass}
            data={node}
            label={node.label}
            key={node.id}
        />);
    });

Answer 1

您没有正确传递 id，您需要将 test 函数上移到 Graph 组件，并使用 创建一个 constructor >数组状态

然后将数据映射到 SVG 中，例如

<svg className="graph" width={width}  height={height} >
              {this.props.data.nodes.map( (node) =>   
                <g  onClick={this.test.bind(this, node)}>

            <Node
                data={node}
                name={node.name}
                key={node.id}
            />
                </g>)}
                <g>
                     {this.props.data.links.map( (link,i) => 
                <Link
                    key={link.target+i}
                    data={link}

                />)}
                </g>
            </svg>

The important thing that we did above that we passed the node with onClick bind

onClick={this.test.bind(this, node)}

然后调用测试函数，我添加了一些额外的代码以避免重复单击的 id

test = (node) => {
  console.log(node.id, 'look here this coming from test function')
  if(this.state.array.indexOf(node.id) !== -1){
     this.setState(prevState => ({ 
        array: this.state.array.filter(d => d.id !== node.id)
    }));// this will not repeat the clicked id
  }else{
      this.setState(prevState => ({ 
        array: [...prevState.array, node.id]
    }));
  }
};

这是完整的代码

https://codepen.io/Liamm12/pen/NYeOyW?editors=0011