阵营接收道具

Question

修复

当添加这种方法首次该元素被呈现输入不更新，它具有访问props接收的时候了。

componentDidMount() { 
    if (typeof this.props.options.value !== "undefined") 
    this.setState({value: this.props.options.value}) 
}, 

我有几个反应元素几乎按预期工作。我有一个视图，其中包含一系列元素和一个模式视图来编辑它们。当单击某个元素的编辑按钮时，该元素将被设置为选中的状态，并显示模态窗体（将其作为道具传递给该元素）。

showUpdateForm(poiIndex) { 
    this.setState({selectedPoi: this.state.pois[poiIndex]}) 
    $('#updatePoiModal').modal('show') 
    console.log('shown') 
}, 

...render()... 
<UpdatePoiForm poi={this.state.selectedPoi} ref="updatePoiForm" successHandler={this.successUpdateHandler}/> 

当项目被点击模态视图正确显示，但是，通过不显示文本值;显示前一个选定元素的元素（如果是第一个元素，则为空框）。这里是模态的视图的呈现方法：

render() { 
    console.log('rendering') 
    if(!this.props.poi) 
    return null 
    console.log(this.props.poi.name) 
    var poi = this.props.poi 

    var config = { 
    url: `${context.apiUrl}user/pois/${poi.id}`, 
    method: 'PUT', 
    successMessage: 'El Punto de Interés fue actualizado', 
    successHandler: this.successHandler, 
    hideSubmitButton: true, 
    fields: { 
     name: { 
     label: 'Nombre', 
     type: 'text', 
     value: this.props.poi.name 
     }, 
     location: { 
     label: 'Ubicación', 
     type: 'text', 
     display: false, 
     value: this.props.poi.location 
     }, 
     category_id: { 
     label: 'Categoría', 
     type: 'select', 
     options: context.poi_categories.map((cat) => { 
      return {value: cat.id, desc: cat.name} 
     }) 
     } 
    } 
    } 

    return (
    <div> 
     <Row> 
     <Col size="12"> 
      <Panel> 
      <PanelBody> 
       <FormComponent config={config} ref="form"/> 
      </PanelBody> 
      </Panel> 
     </Col> 
     <Col size="12"> 
      <Panel> 
      <PanelHeading heading="Selecciona la ubicación" /> 
      <Map height="400px" ref="map_update_poi" zoom="15"/> 
      </Panel> 
     </Col> 

     </Row> 
    </div> 
) 
} 

这里是形式分量的渲染方法：

render() { 
    elems = [] 
    count = 0 

    for (var key in this.props.config.fields) { 
    console.log(this.props.config.fields[key]) 
    var _type = this.props.config.fields[key].type 
    var config = { 
     key: count++, 
     options: this.props.config.fields[key], 
     ref: key, 
     refName: key, 
     fullWidth: this.props.config.fullWidth, 
    } 

    switch (_type) { 
     case 'text': 
     elems.push(<InputElement {...config}/>) 
     break 
     case 'select': 
     elems.push(<SelectElement {...config}/>) 
     break 
     case 'multipleSelect': 
     elems.push(<MultipleSelectElement {...config}/>) 
     break 
     case 'button': 
     elems.push(<ButtonElement {...config}/>) 
     break 
     case 'switcher': 
     elems.push(<SwitcherElement {...config}/>) 
     break 
     case 'timePicker': 
     elems.push(<TimePickerElement {...config}/>) 
     break 
     case 'radio': 
     elems.push(<RadioElement {...config}/>) 
     break 
     case 'autocomplete': 
     elems.push(<AutoCompleteInputElement {...config}/>) 
     break 
    } 
    } 
    console.log(elems) 

    return (
    <form action="#" className="form-horizontal"> 
     <div className="form-content"> 
     {elems} 
     {!this.props.config.hideSubmitButton ? <div className="form-buttons"> 
      <div className="row"> 
      <div className="col-md-offset-3 col-md-9"> 
       <button type="submit" onClick={this.handleSave} 
         className="btn btn-blue btn-ripple">Crear</button> 
      </div> 
      </div> 
     </div> : null} 
     </div> 
    </form> 
) 
} 

而渲染所述输入元件（除去变量声明为简洁起见，没有方法缺少）：

render() { 
    return (
    <div className={formClass} style={style}> 
     <label className="control-label col-md-3">{this.props.options.label}</label> 
     <div className={inputClass}> 
     <div className="inputer"> 
      <div className="input-wrapper"> 
      <input ref={this.props.refName} type="text" className="form-control" onFocus={this.props.onFocus} 
       placeholder={this.props.placeholder} value={this.state.value} onChange={this.handleChange}/> 
      </div> 
      {validationMsg} 
     </div> 
     </div> 
    </div> 
) 
} 

最后，我检查输入的道具在这里：

componentWillReceiveProps(nextProps) { 
    console.log('input element', nextProps) 
    if (typeof this.props.options.value !== "undefined") 
    this.setState({value: this.props.options.value}) 
}, 

我已经在链的每个“停止”中添加了日志语句。模态视图正确显示元素，表单显示最后一个单元的字符串，输入元素的道具也显示最近单击元素的信息。但是，在呈现输入时，this.state.value为null（这是getInitialState（）中给出的值）或上一个元素的值。根据日志的顺序，道具在渲染前被接收。虽然我知道状态更新不是直接的，但如果渲染发生了，那么状态的改变应该再次触发渲染，这次使用正确的值，但是这并没有发生，我不明白为什么！

shown 
list index 1 
name Object { label="Nombre", type="text"} 
location Object { label="Ubicación", type="text", display=false} 
category_id Object { label="Categoría", type="select", options=[2]} 
[Object { key="0", ref="name", props={...}, more...}, Object { key="1", ref="location", props={...}, more...}, Object { key="2", ref="category_id", props={...}, more...}] 
input props Object { options={...}, refName="name", fullWidth=undefined} 
render input null 
input props Object { options={...}, refName="location", fullWidth=undefined}componentWillReceiveProps index.js (line 35220) 
render input null 
** At this point the new element is received ** 
** The objects didn't paste completely, but the correct values are 
    there this time. However, there is no output from componentWillReceiveProps ** 
new poi test02 
rendering update form 
update form test02 
name Object { label="Nombre", type="text", value="test02"} 
location Object { label="Ubicación", type="text", display=false, more...} 
category_id Object { label="Categoría", type="select", options=[2]} 
[Object { key="0", ref="name", props={...}, more...}, Object { key="1", ref="location", props={...}, more...}, Object { key="2", ref="category_id", props={...}, more...}] 
2 render input null 
Object { category="Almacen", category_id=1, id=627, more...} 

编辑2： 现在这个问题只发生在第一次点击。发生时，我将this.props替换为@P @ e @ Radio-的建议中的nextProps。

Answer 1

在componentWillReceiveProps，设置状态来nextProps.options.value而不是this.props.options.value

componentWillReceiveProps(nextProps) { 
    if (typeof nextProps.options.value !== "undefined") 
    this.setState({value: nextProps.options.value}) 
}, 

如果它是第一个渲染，componentWillReceiveProps不叫，所以你可以使用componentDidMount与此。props实现相同：

componentDidMount() { 
    if (typeof this.props.options.value !== "undefined") 
    this.setState({value: this.props.options.value}) 
}