gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:48:30 25 4
gpt4 key购买 nike

我正在使用 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:上面的代码是一个虚拟代码,只是为了说明我的问题。

最佳答案

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

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

关于javascript - 通过循环绘制的多个输入字段在react和redux中插入时不会更新新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46159979/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com