我正在创建一个反应组件，允许用户将账单分配给许多受让人 .

我使用动态数量的受控数字输入，其中值由组件状态（proposedBillSplit）确定 . 我这样做是通过准备一系列输入来实现的：

render() {
    let assigneeRows = [];

    for (var i=0; i< this.state.proposedBillSplit.length; i++) {
            assigneeRows.push(
                <input type="number"
                    value={this.state.proposedBillSplit[i][2]}
                    onChange={this.billSplitChanged}/>
             );
     }
     return (<div>{assigneeRows}</div>)
}

仅此输入工作正常，但我还想添加一个按钮，该按钮平均分配账单，并通过更新状态为每个输入分配新的等额 . 我尝试这样做：

this.setState({
    'proposedBillSplit':
        [this.state.proposedBillSplit.map((allocation, index) => {
            return [
                this.state.proposedBillSplit[index][0],
                this.state.proposedBillSplit[index][1],
                newSplit]
        })]

});

但是我得到一个反应错误，因为它似乎通过改变状态强制输入改变使得输入不受控制（参见下面的错误）？我的代码是否存在问题，或者实际上是否只允许通过用户输入进行输入值更改？

Warning: A component is changing a controlled input of type number to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
javascript reactjs input