javascript - 通过循环绘制的多个输入字段在react和redux插入时不会更新新值

我在Redux的React中工作，事情看起来非常自由，直到遇到一个问题为止。可能是我没有以正确的方式实现这一特定部分，但是我需要您的帮助。

所以我有一个react组件，在componentWillMount（）上，我从API调用中获取数据

我将动作和动作创建者放在适当的位置，以便它调度getSupplier动作，我将它们以redux状态存储为SupplierList，该数组是一个对象数组，例如
[{name：'Bob'，score：10，id：1}，{name：'John'，score：10，id：2}];

现在，我的UI由一个以名称和得分作为表数据的表组成。得分将是一个输入字段，最初将具有来自getSupplier服务的得分值。

我已经循环并返回组件中的jsx，如下所示

   render(){
       var data = this.props.supplierList;
       if(data.length){
            return (
               <div className='fx-container'>
                   {
                     data.map((v,i)=>{
                         (<div class='fx-table-row' key={v.id}>
                            <div class='fx-supp-name'>{v.name}</div>
                            <input
                            type='text'
                            className='fx-input'
                            value={v.score}
onChange={(e)=>{this.handleInputChange(e.target.value)}}
                            onBlur={(e)=>    {this.props.actions.updateScore(v.id,e.target.value)}}
                          </div>);
                      });
                   }
               <div>
            );
        }
      else{
        return null;
      }

    }

因此，我在绘制初始值，插入新值以及模糊时，需要通过分派一个以action.js文件编写的操作来更新新值。
我面临的问题是我无法在输入中插入任何值，也无法打退格并插入新值。

请帮助，因为我是新来的反应者和救赎者。
PS：上面的代码是一个伪代码，只是为了说明我的问题。

最佳答案

首先，您可能不想在componentWillMount中调用API。看到这篇文章：https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

您无法修改输入的原因是，这是一个受控字段，并且您没有在调用onChange事件。见https://facebook.github.io/react/docs/forms.html