使用 React 映射数组时重新排序索引

Question

我正在更改映射中的对象属性，并且我想在对象属性为 changed ( = input disabled) 时更改索引，那么最好的方法是什么？

我已尝试为索引创建新数组，但无法使其工作，因为它需要一些具有单独数组的嵌套映射并且无法使其工作。

编辑：我在官方文档中使用索引来标记文本部分的位置，这就是为什么这个索引如此重要。

onToggleTextPart = (e, index) => {
    const node = this.myCheckbox[index]
    let newStates = [ ...this.state.meeting_parts ];
    if(node.checked) {
      newStates[index - 1].type_tag = "Included";
    }
    else {
      newStates[index - 1].type_tag = "notIncluded";
      newStates.splice(index-1, 1)

    }
    this.setState({ meeting_parts: newStates });
  }

return _.map(meeting_parts, (meet, index) => {
      let checked = meet.type_tag === "Included" ? true : false;
      return 
        <div className="form-group">
          <div className="input-group">
            <div className="input-group-prepend">
              <span className="input-group-text minutes-agenda-item-number">
                {index} (THIS is the index i want to change)
              </span>
            </div>

我想，即当我从索引 6 中隐藏一个对象时，它“放弃”它的索引，而索引 7 占据它的位置。

Answer 1

好的，据我了解你想这样做：

meeting_parts.filter((meet)=>meet.type_tag === "Included").map((meet, index)=>{
 // your mapping function here
});

过滤器将返回 type_tag 为“包含”的会议数组。

您可以阅读filter function。

编辑：

let includedCount = 0;
meeting_parts.map((meet, index)=>{
  if(meet.type_tag === "Included") {
    includedCount += 1;
  }
  // your mapping function here but use inlcudedCount instead of index
});

当然，现在它会多次显示一些数字。如果您不希望它们显示，则必须添加逻辑以在必要时禁用渲染。