【问题标题】：React: How to display mapped array after button press?React：按下按钮后如何显示映射数组？
【发布时间】：2021-05-11 14:08:55
【问题描述】：

我是新来的反应和努力让它发挥作用。我可以显示一个映射数组，但我正在尝试更新数组，映射它，然后显示它。不知道如何让映射数组在更新后显示？

也尝试将 mappedItems 添加到我的函数中，但这似乎并没有解决问题。 TIA。

import React, { Component } from 'react';

const itemsList = ['item1','item2'];

class RecieveInput extends React.Component {
    constructor(){
        super();
        this.state = {
            list: itemsList
        }
    }

    render(){
        const pressedEnter = event => {
            if (event.key === 'Enter') {
            this.state.list.push(event.target.value);
            console.log(this.state.list);
            }
        }  
        
        const mappedItemsList = this.state.list.map( (listItem, i) => <li>{this.state.list[i]}</li> )
     
        return(
            <div>
                <input 
                type ="text" 
                id="textInput"
                placeholder="Enter Item Here"
                onKeyPress={pressedEnter}
                />
                <ol className='ol'>{mappedItemsList}</ol>
             </div>
        )
    }
}  

export default RecieveInput

enter image description here

【问题讨论】：

你不应该直接改变状态this.state.list.push(event.target.value);。这应该使用提供的this.setState 即this.setState({ list: [...list, event.target.value ]}); 来完成。 React 使用this.setState 来了解状态何时更新，并且类组件的shouldComponentUpdate 方法仅对引用进行浅比较，因此如果您在设置状态时不创建新数组，React 不会将其视为更改.

标签： arrays reactjs mapping

【解决方案1】：

问题

应该在组件中声明pressedEnter 回调，而不是render 函数。它也不应该通过推入状态数组来改变状态对象。

解决方案

将pressedEnter 处理程序移动到组件中并使用this.setState 将更新排入队列。您需要浅拷贝现有状态并将新元素附加到其中，以便您的 list 状态是一个新的数组引用。

const pressedEnter = event => {
  const { value } = event.target;
  if (event.key === 'Enter') {
    this.setState(prevState => ({
      list: prevState.list.concat(value), // or [...prevState.list, value]
    }));
  }
}

【讨论】：