React JS 输入类型文本在击键后失去焦点

Question

小提琴演示我正在尝试更新包含数据对象数组的状态数组。

构造函数中的状态：

this.state = {
        data: [
        { name: "Abc", age: 12 },
        { name: "Xyz", age: 11 }
      ]
    }

处理器：

handleName(idx, e){
        const data = this.state.data.map((item, sidx) => {
            if (idx !== sidx) return item;
            return { ...item, name: e.target.value };
        });
        this.setState({ data: data });
  }
  handleAge(index, e){
        const data = this.state.data.map((item, sidx) => {
            if (idx !== sidx) return item;
            return { ...item, age: e.target.value };
        });
        this.setState({ data: data });
  }

渲染方法：

render() {
      console.log('render');
        const Input = () => this.state.data.map((item, index) =>{
            return (
            <div>
              <input type="text" value={item.name} onChange={(e) => this.handleName(index, e)}/>
              <input type="text" value={item.age} onChange={(e) => this.handleAge(index, e)}/>
            </div>
          );
        });
        return (
            <div>
             <Input/>
          </div>
        )
      }
    }

我知道在每次击键中，渲染方法都在刷新 dom，这是我的渲染元素出了问题。有什么建议吗？

Answer 1

从映射中返回元素时，您必须为其分配一个键，否则将始终在新渲染上创建它的新实例。此外，不得在渲染中创建组件

render() {
  console.log('render');
    return (
      <div>
         {this.state.data.map((item, index) =>{
        return (
        <div key={index}>
          <input type="text" value={item.name} onChange={(e) => this.handleName(index, e)}/>
          <input type="text" value={item.age} onChange={(e) => this.handleAge(index, e)}/>
        </div>
      );
    })}
      </div>
    )
  }
}

工作演示

Answer 2

因为在每次重新渲染时，它都会从状态创建组件 woth 值的新实例，

您需要将函数从渲染中删除，或者只是像这样使用它

render() {
  console.log('render');  
    return (
      <div>
         {this.state.data.map((item, index) =>{
           return (
             <div>
              <input type="text" value={item.name} onChange={(e) => this.handleName(index, e)}/>
              <input type="text" value={item.age} onChange={(e) => this.handleAge(index, e)}/>
             </div>);})
         }
      </div>
    )
  }
}

演示