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

Question

Ожидаемый эффект: нажмите <li> -> взять индекс -> отправить этот индекс компоненту Watch.Когда я нажимаю <li>, я беру индекс и перемещаю его в компонент Watch.Однако, когда я нажимаю второй li, он возвращает индекс того, на который я нажал в первый раз.Я думаю, что это потому, что он обновляет этот индекс через componentDidMount.Как я могу ссылаться на этот индекс после componentDidMount?

Todo

class Todo extends Component {
      render () {
        return (
          <div className = "itemTodos" onClick={()=> this.props.selectTodo(this.props.index)}>
          </div>
        )
      } 
    }

    export default Todo;

Приложение

class App extends Component {
  constructor(){
    super();

    this.state {
      selectedTodoIndex: index
    }

  }

  selectTodo = (index) => {
    this.setState({
      selectedTodoIndex: index
    })
  }

  render () {
    return (
      <div>
           <ul>
      {
        this.state.todos
          .map((todo, index) =>
            <Todo
              key={index}
              index={index}
              todo={todo}
              selectTodo ={this.selectTodo}
            />
          )
      }
    </ul>
          <Watch
            selectedTodoIndex = {selectedTodoIndex}
          />
      </div>
    )
  } 
}

export default App;

Часы

class Watch extends Component {
  constructor(){
    super();

    this.state = {
      selectIndex: null
    }
  }

 componentDidMount() {
    this.setState({
      selectIndex:  this.props.selectedTodo
    });
 }


  render () {
    return (
      <div>
      </div>
    )
  } 
}

Answer 1

Прежде всего вы используете selectedTodoIndex в

<Watch
        selectedTodoIndex = {selectedTodoIndex}
      />

, но это не указано в вашем коде рендеринга.Добавьте

const {selectedTodoIndex} = this.state;

в функцию рендеринга.

Во-вторых, используйте componentDidUpdate в Watch для обновления внутреннего состояния при обновлении реквизита:

 class Watch extends Component {
  constructor(){
    super();

    this.state = {
      selectIndex: null
    }
  }

 componentDidMount() {
    this.setState({
      selectIndex:  this.props.selectedTodo
    });
 }

 componentDidUpdate (prevProps) {
    if (prevProps.selectedTodo !== this.props.selectedTodo)
        this.setState({
          selectIndex:  this.props.selectedTodo
        });
 }

  render () {
    return (
      <div>
      </div>
    )
  } 
}

Answer 2

Если я не ошибаюсь, ваш компонент Todo находится на страже ??. Так что Watch компонент должен быть таким:

render () {
    return (
      <div>
       <Todo index={this.state.selectedIndex} selectedTodo={this.props.selectedTodoIndex}/>
      </div>
    )
  } 

Здесь я сделал коды и коробку с этим кодом. Не стесняйтесь проверить и дайте мне знать, если у вас есть какие-либо сомнения. Кодовая ссылка: https://codesandbox.io/s/frosty-chaplygin-ws1zz

Answer 3

Есть много улучшений, которые будут сделаны.Но я верю, что вам нужен метод getDerivedStateFromProps lifeCycle в компоненте Watch.Таким образом, код будет:

getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.selectedTodoIndex !== prevState.selectedTodoIndex) {
    return { selectIndex: nextProps.selectedTodoIndex }
  }
}

Это проверит, изменился ли выбранный индекс в Компоненте приложения, если да, обновит состояние в Компоненте Наблюдения.