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

Question

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

所以我有一个 React 组件，并且在 componentWillMount() 上我从 API 调用获取数据

我有我的 Action 和 Action 创建者，这样它就可以调度 getSupplier Action ，我将它们存储在 redux 状态中作为 sellerList，它是一个对象数组，例如 [{name:'鲍勃',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;
      }

    }

所以我正在绘制我的初始值，在插入新值和模糊时，我需要通过分派(dispatch)写在action.js文件中的 Action 来更新新值 我面临的问题是我无法在输入中插入任何值。我无法按退格键并插入新值。

请帮忙，因为我是 react 和还原的新手。 PS:上面的代码是一个虚拟代码，只是为了说明我的问题。

Answer 1

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

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