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

Question

我刚开始做出反应，正在努力让它发挥作用。我可以显示映射数组，但我正在尝试更新数组、映射它，然后显示它。无法弄清楚如何在更新后显示映射数组？

也尝试将 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

Answer 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]
    }));
  }
}

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

React: How to display mapped array after button press?

arrays

mapping

reactjs

问题

解决方案