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

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

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

我有我的动作和动作创建者，这样它就可以发送一个getSupplier动作，我将它们存储在redux状态下作为supplierList，supplierList是一个类似 [{姓名：'Bob'，分数：10，id:1}，{姓名：'John'，分数：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;
      }

    }

render（）{
var数据=this.props.supplierList；
if（数据长度）{
返回(
{
data.map（（v，i）=>{
(
{v.name}
{this.handleInputChange（e.target.value）}
onBlur={（e）=>{this.props.actions.updateScore（v.id，e.target.value）}
);
});
}
);
}
否则{
返回null；
}
}

因此，我正在绘制初始值，在插入新值和模糊时，我需要通过调度action.js文件中编写的操作来更新新值 我面临的问题是，我无法在输入中插入任何值。我无法单击backspace并插入新值

请帮助我，因为我是新的反应和重复。

---

PS：上面的代码是一个伪代码，只是为了说明我的问题。

首先，您可能不想在componentWillMount中调用API。见此帖：

---

您无法修改输入的原因是，这是一个受控字段，并且您没有调用onChange事件。首先请参见，您可能不想在componentWillMount中调用API。见此帖：

---

您无法修改输入的原因是，这是一个受控字段，并且您没有调用onChange事件。请看

这是因为

value={v.score}

输入字段的值由

v.score

控制，它来自

props

因此，在

this.props.actions.updateScore（）函数中，您应该更改
分数，以便
props
发生更改

除非更改
道具
，否则输入字段的值永远不会更改

你也应该使用
onChange（）
而不是
onBlur（）
这是因为
value={v.score}

输入字段的值由
v.score
控制，它来自
props

因此，在
this.props.actions.updateScore（）函数中，您应该更改
分数，以便
props
发生更改

除非更改
道具
，否则输入字段的值永远不会更改

您还应该使用
onChange（）
而不是
onBlur（）
此外，您还应该提供映射项的键。请看，我已经在我的原始代码中放置了键和onChange方法。很抱歉，在这里键入时错过了。刚刚更新。然而，我的下一个问题是，我应该在onChange中做什么？我是否需要调度一个操作来更改我的redux状态，并在输入更改时保留新值，然后重新渲染所有内容？我是这样做的，但我不确定我是否遵循了正确的方法。发送操作以更新分数。或者，您可以查看类似于Thank@ovation22的内容。因此，基本上，我将在输入中键入每个字符时重新渲染所有内容，因为我的onChange将对一个操作进行分派，这将触发使用新值重新渲染。这不是一件昂贵的事情吗？只是好奇地想知道，根据您存储状态的方式、在渲染中执行的操作等，它的性能可能会更低。这里有一篇关于redux性能的好文章：另外，您应该提供映射项的键。请看，我已经在我的原始代码中放置了键和onChange方法。很抱歉，在这里键入时错过了。刚刚更新。然而，我的下一个问题是，我应该在onChange中做什么？我是否需要调度一个操作来更改我的redux状态，并在输入更改时保留新值，然后重新渲染所有内容？我是这样做的，但我不确定我是否遵循了正确的方法。发送操作以更新分数。或者，您可以查看类似于Thank@ovation22的内容。因此，基本上，我将在输入中键入每个字符时重新渲染所有内容，因为我的onChange将对一个操作进行分派，这将触发使用新值重新渲染。这不是一件昂贵的事情吗？只是好奇地想知道，根据您存储状态的方式、在渲染中执行的操作等，它的性能可能会更低。这里有一篇关于redux性能的好文章：你能展示updateScore（）的代码吗function.Hi Vladimir.Updatescore函数代码工作正常。当我模糊输入时，它确实会被触发，但我担心的是我无法在输入中插入新的输入值。输入只是不更新其值属性。我要说的是，你应该在onChange（）上调用这个.props.actions.Updatescore（）函数事件，以便props.supplierList change可以显示UpdateCore（）的代码function.Hi Vladimir.Updatescore函数代码工作正常。当我模糊输入时，它确实会被触发，但我担心的是我无法在输入中插入新的输入值。输入只是不更新其值属性。我要说的是，你应该在onChange（）上调用这个.props.actions.Updatescore（）函数如此这般