Question

我在React与Redux一起工作.Things看起来非常自由流动，直到我遇到一个问题。可能我没有以正确的方式实现这个特定的部分。但是我需要你的帮助。

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

我有我的动作和动作创建器，以便它调度getSupplier动作，我将它们存储在redux状态作为supplierList，这是一个像对象的数组 [{名称： '鲍勃'，分数：10，ID：1}，{名称： '约翰'，得分：10，ID：2}];

现在，我的UI包含一个名称和分数为表数据的表.Score将是一个输入字段，最初将具有来自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：上面的代码是一个虚拟代码，只是为了说明我的问题。

Answer 1

首先，您可能不想在componentWillMount中调用API。请参阅此帖子：https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

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

Answer 2

这是因为value={v.score}

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

因此，在this.props.actions.updateScore()函数中，您应该更改score，以便props更改。

除非更改props，否则输入字段的值将永远不会改变

此外，您应该使用onChange()代替onBlur()

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

2 个答案: