反應輸入字段沒有添加到已經呈現的列表

Question

我一直在嘗試添加一個選項到食物列表來添加其他食物與輸入字段。每次我進入時，它不僅帶走了輸入字段，而且還帶走了食物清單。我不確定我在這裏做錯了什麼。

這裏是我的搜索欄組件：

import React, { Component } from 'react'; 

class SearchBar extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
      inputValue: '' 
     } 
    this.handleChange = this.handleChange.bind(this); 
    this.addItem = this.addItem(this); 
    } 

    handleChange(event) { 
     const inputTerm = event.target.value; 
     this.setState({ 
      inputValue: inputTerm 
     }) 
     console.log(this.state.inputValue) 
    } 

    addItem(props) { 
     const food = this.props.food; 
     food.push(this.state.inputValue) 
    } 


    render() { 
     return (<div> 
      <form 
       className="form" 
       onClick={this.addItem}> 
       <div className="edit-input-div"> 
       <input type='text' value={this.state.inputValue} 
        onChange={this.handleChange} 
        className='form-control' 
        placeholder="AddItem" 
       /> 
       <span> 
        <button onClick={this.addItem} className="add-new-item">Add Food</button> 
       </span> 
       </div> 
      </form> 
     </div> 
     ) 
    } 
} 

export default SearchBar; 

它正在這裏呈現：

import React from 'react'; 
import shortid from 'shortid'; 
import SearchBar from './SearchBar'; 

const TotalListItem = (props) => { 
    return (
     <ul className="cook-list" id={props.index}> 
      {props.food.map((item, index) => { 
       return (
        <li className="cook-list-items" key={shortid.generate()} id={index}>{item.title}</li>  
       ) 
      })} 
     <button className="delete" onClick={() => props.onDelete(props.food)}>Delete Order</button> 
     <button className="complete" onClick={() => props.onComplete(props.food)}>Complete Order</button> 
     <SearchBar 
      food={props.food} 
     /> 
     </ul> 
    ); 
}; 

export default TotalListItem; 

其正在這裏呈現：

import React from 'react'; 
import shortid from 'shortid'; 
import TotalListItem from './TotalListItem'; 

const Total = (props) => { 
    if (props.cookList.length === 4) { 
     alert('the manager has been alerted') 
    } 

    const renderProps = props.cookList.map((food, index) => { 
     return (
      <TotalListItem 
       index={index} 
       food={food} 
       key={shortid.generate()} 
       onDelete={props.onDelete} 
       onComplete={props.onComplete} 
      /> 
     ); 
    }) 

    return (
     <div> 
      <div>{renderProps}</div> 
     </div> 
    ) 
} 

export default Total; 

Answer 1

不能更新傳遞的數據通過道具到您的組件。您的SearchBar組件中的addItem方法會嘗試將項目添加到從其父項收到的食品道具中。這導致添加失敗。

相反，在父組件中創建一個方法，它對實際的食物數組做相同的事情，並通過它的道具傳遞給SearchBar組件。這應該有希望解決您的問題。

類似於下面的類。

export default class SearchBarParent extends React.Component{ 
    constructor{props){ 
    super(props); 
    this.state={food:[]}; 
.... 
    } 

    addItem=(item)=>{ 
    let foodList = [...this.state.food]; 
    foodList.push(item); 
    this.setState({food:foodList}); 
    } 
... 
    render(){ 
    return(
      <SearchBar food={this.state.food} addItem={this.addItem}/> 
    ... 
    ); 
    } 

}