当使用新道具调用渲染时，React JS没有完全更新视图

React JS Not Completely Updating View When Render Is Called With New Props

本文关键字：JS 新视图 更新 React 新道具 调用      更新时间：2023-09-26

在React JS中，我有一个数组，我作为一个道具传递(我不想使用状态)。如果我从数组中删除一个项目并重新呈现该组件，则字段更新的是数量，但不更新值。被传递的道具被更新。我不想设置textarea的值，因为我不想为这个组件使用state，所以prop是textarea的子组件。这不是我的实际组件，而是我创建的用来演示问题的东西。我的理解是，当道具更新时，视图也应该更新。

这是一个JSFiddle: https://jsfiddle.net/69z2wepo/12745/

items=["One","Two","Three","Four","Five"];

var Areas=React.createClass({
        handleClickAdd: function() {
        items.push("");
        rerender();
    },
    handleClickRemove: function(fieldindex,event) {
        items.splice(fieldindex,1);
        rerender();
    },
    handleKeyUp: function(event) {
        sdbobj.resizeArea(event.target);
    },
    render: function() {
        return (
            <div>
                {this.props.items.map(function(item,i,arr){
                    return (
                        <div key={i}>
                            <textarea  onKeyUp={this.handleKeyUp}>
                                {item}
                            </textarea>
                            {(arr.length>1?<button onClick={this.handleClickRemove.bind(this,i)}>Remove</button>:"")}
                        </div>
                    )
                }.bind(this)) }
                <button onClick={this.handleClickAdd}>
                    Add
                </button>
                <div>
                    Items = [{items.toString()}]
                </div>
            </div>
        )
    }
});
function resizeArea(elem)
{
    elem.style.height="1px";
    elem.style.height=(elem.scrollHeight)+"px";
}
function rerender()
{
    React.render(<Areas items={items} />, document.getElementById('container'));
}
React.render(<Areas items={items} />, document.getElementById('container'));

感谢您的帮助。

谢谢

Checkout React的文章…因为键是索引，所以在你删除条目之后，它就不同步了，React看不到它的变化。如果您将键绑定到项目文本或项目id，则应该可以工作。

<div key={item}>
  <textarea  onKeyUp={this.handleKeyUp}>
    {item}
  </textarea>
  {(arr.length>1?<button onClick={this.handleClickRemove.bind(this,i)}>Remove</button>:"")}
</div>

相关文章：