当我点击它时如何显示元素？

Question

当我点击任何按钮时，显示的是 1，如果我再次点击，我得到的是错误信息，提示推送不是函数。按钮数组中的索引 1 似乎已被推入 state.num 然后 state.num 改变了它，s 类型从数组到数字所以我有 3 个问题：

1-为什么选择 (1) 而不是按钮数组中的另一个元素？？我无法理解

2-为什么 num 的类型发生了变化？它不是应该将 (1) 作为数组元素推送吗？看起来它用数字 1 交换了 num 数组。.这是怎么发生的使用推送方法??

3-当我点击按钮数组时如何显示每个元素？我做错了什么？

这是我的代码

 class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      num:[],
    }
    this.handleclick=this.handleclick.bind(this);
  }
  handleclick (ele){
    this.setState({num:this.state.num.push(ele)})
  };
  render() { 
    const buttons = ["÷", 1, 2, 3, "*", 4, 5, 6,"+", 7, 8, 9, ".", 0, "-"];
    return (
      <div className="calculation-grid">
        <div className="output">
          <div className="previous-operand"></div>
          <div className="current-operand">{console.log(this.state.num)}</div>
        </div>
        <button className="span-two">AC</button>
        <button>DEL</button>
       {buttons.map((ele)=><button  onClick={()=>this.handleclick(ele)} key={ele}>{ele}</button>)}
        <button className="span-two">=</button>
</div>
    );
  }
}
 
export default App;

Answer 1

问题是 Array.prototype.push 没有 return 更新的数组（它是数组的长度）。您可以使用传播运算符来推送如下值。

handleclick(ele) {
  this.setState({ num: [...this.state.num, ele] });
}

或（使用回调函数）

handleclick(ele) {
  this.setState((prevState) => ({
    ...prevState,
    num: [...prevState.num, ele]
  }));
}

当我点击它时如何显示元素？

how to display elements when I click on it?

javascript

arrays

jsx

reactjs