Question

更新：已修复。这是一个小学生错误。我实际上已经在渲染函数中声明了const BaseObject =（）=> ，然后在渲染函数中使用了返回。抱歉浪费您的时间。我将const作为函数移到外面，一切都很好。

我的状态很简单：

this.state = {
    filters: [{ key: '', value: '' }, { key: '', value: '' }]
}

render方法的一部分是：

<div>
                {
                this.state.filters.map((filter, index) => {

                    return <div key={'filter_parent_div_'+index} style={{ display: 'flex', alignItems: 'center' }}>
                            <AutoComplete key={'filter_auto'+index}  className='width30 sane-margin-from-right' data={keys} onItemSelected={this.onKeySelected(index)} label='Filter'/>
                            <div key={'filter_div_'+index} className='sane-margin-from-right width30'>
                                <FormattedTextbox
                                    id={'filterValue_'+index}
                                    key={'filter_text_'+index}
                                    type='text'
                                    label='Filter Value'
                                    defaultValue={filter.value}
                                    onChange={this.filterTextChanged(index)}>
                                </FormattedTextbox>
                            </div>
                            { index > 0 ?  <div className='show-hand' onClick={this.deleteFilter(index)}><i style={{ color: 'lightgray' }} className='sane-margin-from-top material-icons'>clear</i></div>  : '' }
                            </div>

                        })
                }
</div>

它产生如下结果：

现在我的问题是，当我尝试在文本字段中添加文本时，它以某种方式刷新了状态，并且每次都使光标移开。例如，在我的第一行中，如果我尝试在过滤值文本字段中输入“ Vikas”，则一旦输入“ V”，它就会刷新该组件，并且我的焦点会消失。看来我在这里做一些愚蠢的事情，并以某种方式弄乱了状态。我的文字更改方法是：

filterTextChanged = index => event => {
    const filters = this.state.filters; // or JSON.parse(JSON.stringify(this.state.filters))
    filters[index].value = event.target.value;
    this.setState({ filters });
};

所以我可以看到这种方法是完全错误的，但是在这种情况下我找不到最佳的方法。如果我的状态中只有一个对象，则可以轻松地使用该状态并仅为该对象更新状态，但是如何使用Array做到这一点？有什么帮助吗？我可以找到替代方法，例如使用onBlur，但我确实需要找到在状态下使用数组的最佳方法。有帮助吗？

Answer 1

问题出在您的/// (string list -> string list) -> Envelope<'a> -> Envelope<'a> let mapErrors f e = match e.Errors with | [] -> e | _ -> { e with Errors = f e.Errors }上，您正在使用索引作为键，但是无法识别，即当您更改过滤器时它会改变，请尝试为每个过滤器使用唯一键坚持状态更改，它应该可以解决您的问题。

Answer 2

据我所知，由于没有设置组件的value，所以没有使组件保持最新状态。我可能读错了代码，但是尝试添加value={filter.value}而不是defaultValue={filter.value}。

如果这不起作用，则进行小提琴会很有帮助。

反应状态-无法更新状态

2 个答案: