reactjs - 停留在显示更新的数组数据

Question

我有一个数组 List ，我正在使用该.push()方法向其中添加新元素，然后concat在 Onclickadd 方法中使用 List 输入，但它没有更新数组以显示待办事项

import React from 'react'
import './App.css'

class App extends React.Component {
constructor(){
  super()
    this.state={
        List: ['potato']  
    }
  }

  onAddChange=(event)=>{ 
    this.setState=({
           input: event.target.value
        })
  }

  Onclickadd=()=>{
     console.log('clicked')
     this.setState=({List: this.state.List.concat(this.state.input)})
  }

  render (){
    return (
    <div className="App">
      <h1>TODO LIST</h1>
      <input onChange={this.onAddChange} type='text' placeholder='Add Items'/>
      <button onClick={this.Onclickadd} className='btn'>Add</button>
      <ol>
          {this.state.List.map((items, keys) => {
            return <li key={keys}> {items}</li>
          })}
        </ol>
    </div>
  );
} 
  }
   

export default App;

标签： reactjs

Answer 1

this.setState是一个需要一个对象的函数，您正在尝试分配值，而不是this.setState=使用；

this.setState({
   input: event.target.value
})

class App extends React.Component {

    constructor(){
        super()
        this.state={
            List: ['potato']  
        }
    }

    onAddChange=(event)=>{ 
        this.setState({
            input: event.target.value
        })
    }

    Onclickadd=()=>{
        this.setState({List: this.state.List.concat(this.state.input)})
    }

    render (){
        return (
            <div className="App">
                <h1>TODO LIST</h1>
                <input onChange={this.onAddChange} type='text' placeholder='Add Items'/>
                <button onClick={this.Onclickadd} className='btn'>Add</button>
                <ol>
                    {this.state.List.map((items, keys) => {
                        return <li key={keys}> {items}</li>
                    })}
                </ol>
            </div>
        );
    } 
}
   
ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

更多信息setState可以在这里找到