Javascript 如何将单击项的索引移动到另一个不是父项的组件？

预期效果：单击

-->获取索引-->将此索引发送到组件

监视

。 当我单击

时，我抓取索引并将其移动到

Watch

组件。但是，当我单击第二个

li

时，它返回我第一次单击的索引。我认为这是因为它通过

componentDidMount

更新了这个索引。如何在

componentDidMount

之后引用此索引

待办事项

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

    export default Todo;

类Todo扩展组件{
渲染（）{
返回(
this.props.selectTodo（this.props.index）}>
)
} 
}
导出默认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;

类应用程序扩展组件{
构造函数（）{
超级（）；
这个州{
selectedTodoIndex:索引
}
}
选择TODO=（索引）=>{
这是我的国家({
selectedTodoIndex:索引
})
}
渲染（）{
返回(

{
这个是。state。todos
.map（（待办事项，索引）=>
)
}

)
} 
}
导出默认应用程序；

观看

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

    this.state = {
      selectIndex: null
    }
  }

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


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

类监视扩展组件{
构造函数（）{
超级（）；
此.state={
selectIndex:null
}
}
componentDidMount（）{
这是我的国家({
selectIndex:this.props.selectedTodo
});
}
渲染（）{
返回(
)
} 
}

如果我没记错的话，您的Todo组件在watch中？？。因此，观察组件应如下所示：

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

render（）{
返回(
)
} 

---

在这里，我制作了这个代码的代码沙盒。请随时结帐，如果您有任何疑问，请告诉我。代码链接：

有很多改进需要改进。但我相信您正在寻找的是Watch组件中的生命周期方法。因此，代码将是：

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

---

这将检查所选索引是否已在应用程序组件中更改，如果已更改，则将更新Watch组件中的状态。

首先，您可以在中使用selectedTodoIndex

<Watch
        selectedTodoIndex = {selectedTodoIndex}
      />

在渲染函数中

其次，使用Watch中的componentDidUpdate在道具更新中更新内部状态：

 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>
    )
  } 
}

类监视扩展组件{
构造函数（）{
超级（）；
此.state={
selectIndex:null
}
}
componentDidMount（）{
这是我的国家({
selectIndex:this.props.selectedTodo
});
}
componentDidUpdate（prevProps）{
如果（prevProps.selectedTodo！==此.props.selectedTodo）
这是我的国家({
selectIndex:this.props.selectedTodo
});
}
渲染（）{
返回(
)
} 
}

在哪里渲染

Todo

？同样在

Watch

中，您传递道具

selectedTodoIndex

，但从未收到

selectedTodo

@Vencovsky要在应用程序中渲染的道具。请将正确的代码添加到回答中。您不应围绕数组提供的索引旋转代码。您应该为每个项目添加一个id。现在将此索引从“应用程序”组件移动到“监视”组件，并保存为非子项的状态。当我单击

li

索引组件中的更改

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>
    )
  } 
}