操纵父母的阵列道具 - Reactjs

Question

这个问题可能听起来有点复杂。但我被困在这里，所以我把它丢在这里。

我在父级中多次渲染子组件，具有不同的属性和数组。

Parent包含一系列标题，我将它传递给子组件并将select选项映射到该数组。如果从任何子组件中选择标题，则该标题应在其他子组件中显示为已禁用。

子：

{
  this.props.xarray.map((heading, index) => {
    if (heading.headingis.toLowerCase().indexOf(this.state.field) != -1) {
      this.setcheckstate(); //ignore this function
      this.props.actionis(index, 'disabled');  //Using this function (passed from parent) to disable selected option
      return <option value={heading.headingis} key={index} selected disabled={heading.disabled}>{heading.headingis}</option>
    }else{

        return <option value={heading.headingis} key={index} disabled={heading.disabled}>{heading.headingis}</option>
    }

  })
}

父母的行动功能：

handlerHeading(index, disabled) {
   xarray[index]['disabled'] = disabled;
}

它以某种方式工作但问题是

• 如果呈现第一个组件，则会禁用该值
• 然后渲染第二个组件，它将禁用该值 以及之前的一个。

依旧......

但是在第一个组件中，只禁用了一个值，在第二个组件中禁用了2个值，在第3个组件中禁用了3个值。等等...

但我想要在组件6中禁用一个值，它应该在所有以前的组件中被禁用。

例如，请查看以下图片。 组件＃1呈现：

组件＃4呈现：

Answer 1

我通过将xarray更改为父级状态来解决此问题。 这样：

state = {xarray: xarray}

和

handlerHeading(index, disabled) {
   xarray[index]['disabled'] = disabled;
   this.setState({ xarray: xarray });
}

出于某种原因，您无法根据需要更改道具。见This Question