React：按下按钮后如何显示映射数组？

Posted 2023-02-22

【中文标题】React：按下按钮后如何显示映射数组？

【英文标题】：React: How to display mapped array after button press?

【发布时间】：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 不会将其视为更改.

【参考方案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]
    ));