Reactjs 子组件的触发器重新渲染

我是个新来的反应者，我也遇到过几次同样的问题。在这种特殊情况下，我试图在选择下拉列表中获得一个选项，以便在更新文本输入时进行更新

我有一个父级App，其状态属性为“directions”，这是一个数组。这将作为属性传递给子项GridSelector，该子项创建文本字段和下拉列表。更改文本字段时，会触发一个函数来更新父状态。这进而导致GridSelector属性更新。但是，最初从该GridSelector属性生成的下拉列表值不会重新渲染以反映新的属性值

我正试图找出最有效的方法来做这件事和类似的事情。在过去，我在子组件中设置了一个状态，但我认为我也读到了不正确的内容

我的工作地点在

以下是每个文件中的相关代码：

App.js

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
方向：[]，
dataRouteDirections:“/wp json/wp/v2/directions”，
currentDirectionsIndex:0
}
this.addImageToGrid=this.addImageToGrid.bind（this）；
this.changetTitle=this.changetTitle.bind（this）；
}
componentDidMount（）{
fetch（this.state.dataRouteDirections）
.then（data=>data=data.json（））
.then（data=>this.setState（{directions:data}））；
}
addImageToGrid（图像）{
this.refs.grid.onAddItem（image）；//将image add触发器从父级传递给子级
}
createNewDirections（）{
var方向=this.state.directions；
var指数=方向。长度；
var lastDirections=方向[directions.length-1]；
var emptyDirections={“id”：0，“acf”：{}；
emptyDirections.acf.grid=“[]”；
emptyDirections.acf.layout=“[]”；
emptyDirections.title={}；
emptyDirections.title.rendered=“新方向”；
if（lastDirections.id！==0）{///检查最后一个条目是否已为空
这是我的国家({
方向：directions.concat（emptyDirections），//将空方向添加到末尾并更新currentdirections
当前方向索引：索引
});
}
}
changeTitle（新标题）{
var currentDirections=this.state.directions[this.state.currentDirectionsIndex]；
currentDirections.title.rendered=newTitle；
}
render（）{
var has_loaded；//has_loaded已添加，以防止在从WP加载数据期间出现双重呈现
this.state.directions.length>0？已加载=1：已加载=0；
如果（已加载）{
/*const currentGrid=this.state.directions*/
return（//有助于防止表单提交时重定向的虚拟帧
创造新方向
)
}否则{
返回(
)
}
}
}

GridSelector.js

类GridSelector扩展了React.Component{
建造师（道具）{
超级（道具）；
var currentDirections=this.props.directions[this.props.currentDirectionsIndex]；
此.state={
currentTitle:currentDirections.title.rendered
}
}
createOption（方向）{
if（方向、标题）{
返回(
{direction.title.rendered}
)
}否则{
返回(
)
}
}    
handleChangeEvent（val）{
this.props.changetTitle（val）；//触发父级更新状态
}    
render（）{
返回(
{this.props.directions.map（direction=>this.createOption（direction））}
this.handleChangeEvent（e.target.value）}
占位符={this.state.currentTitle}
id=“directionsTitle”
/>
)
}
}

您犯了一个非常常见的初学者错误。处于React状态时应作为不可变对象处理。您正在直接更改状态，因此React无法知道发生了什么变化。您应该使用

this.setState

更改：

  changeTitle(newTitle){
    var currentDirections = this.state.directions[this.state.currentDirectionsIndex];
    currentDirections.title.rendered = newTitle;
  }

例如：

  changeTitle(newTitle){
    this.setState(({directions,currentDirectionsIndex}) => ({
         directions: directions.map((direction,index)=> 
         index===currentDirectionsIndex? ({...direction,title:{rendered:newTitle}}):direction
    })

  changeTitle(newTitle){
    var currentDirections = this.state.directions[this.state.currentDirectionsIndex];
    currentDirections.title.rendered = newTitle;
  }

  changeTitle(newTitle){
    this.setState(({directions,currentDirectionsIndex}) => ({
         directions: directions.map((direction,index)=> 
         index===currentDirectionsIndex? ({...direction,title:{rendered:newTitle}}):direction
    })