Почему я всегда удаляю первый элемент, когда пытаюсь удалить другие? - PullRequest
Новая
       19

Почему я всегда удаляю первый элемент, когда пытаюсь удалить другие?

1 голос
/ 09 июня 2019

Я пытаюсь написать функцию, которая может удалить выбранный компонент и показать результат после удаления в окне поиска.Однако, когда я удалял другие элементы, он также всегда удаляет и первый.

Вот компонент высшего порядка, который содержит компонент окна поиска 

export default class Tagsearch extends Component {

  constructor(props) {
    super(props);

    this.state = {
      hitsDisplay:false,
      inputContent:"",
      tags:[]
    };
  }

  handleRemoveItem = (index) => {
    this.setState(state => ({
      tags: state.tags.filter((tag, i) => i !== index)
    }));
  }

  handleSelect = value => {
    this.setState(prevState => ({ 
      tags:[...prevState.tags, value]
    }));
    this.setState({ selected:true })
  }

  openDisplay = () => {
    this.setState({ hitsDisplay: true })
  }

  closeDisplay = () => {
    this.setState({ hitsDisplay: false })
  }

  render() {

    let result = (
      <div className="container-fluid" id="results">

      </div>
    )

    if (this.state.hitsDisplay) {
      result = (
        <Flexbox 
          flexDirection="column" 
          minHeight="100vh"
        >
          <div className="rows">
            <MyHits handleSelect={this.handleSelect}/>
          </div>

        </Flexbox>
      )
    }

  return (
      <InstantSearch
        appId="********"
        apiKey="**************************"
        indexName="tags"
      >
        <CustomSearchBox
          handleRemoveItem={this.handleRemoveItem}
          tags={this.state.tags}
          styles={styles}
          openDisplay={this.openDisplay}
          closeDisplay={this.closeDisplay}
        />
        {result}

      </InstantSearch>
    )
  }
}

Вот код компонента окна поиска 

import React, { Component } from 'react'
import { connectSearchBox } from 'react-instantsearch-dom';

const CustomSearchBox = ({ currentRefinement, refine, openDisplay, closeDisplay, styles, tags, handleRemoveItem, ...props }) => {
  const handleChange = (e, refine) => {
    const value = e.target.value
    refine(value)
    if (value !== "") {
      openDisplay();
    } else {
      closeDisplay();
    }
  }

  let inputTags = (
    tags.map((tag, i) => 
      <li key={i} style={styles.items}>
        {tag}
        <button
          onClick={() => handleRemoveItem(i)}
        >
          (x)
        </button>
      </li>
    )
  )

  return (
    <label>
      <ul style={styles.container}>
        {inputTags}
        <input
          style={styles.input}
          type="text"
          value={currentRefinement}
          onChange={e => handleChange(e, refine)}
        />
      </ul>
    </label>
  )
}

export default connectSearchBox(CustomSearchBox);

Я просто хотел удалитьэлемент, который я нажимаю на кнопку.Поэтому, если я нажму третью кнопку удаления, третий элемент будет удален, а первый будет сохранен.

Я сопоставляю свой массив с компонентом более низкого уровня и передаю цель компоненту более высокого уровня.Даже если я передам имя цели вместо индекса, она удалит и цель, и первый элемент.Сравните с возможным повторяющимся вопросом, его проблема заключается в удалении последнего, но мой удалит и первый, и целевой.

...