Question

在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'));

非常感谢任何帮助。

由于

Answer 1

Checkout React's article on Reconciliation ...由于密钥是索引，因此在删除项目后它会变得不同步，并且React无法看到它已被更改。如果您将键绑定到项目文本或项目ID，它应该可以工作。

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

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

1 个答案: