Das neu hinzugefügte Element wird nicht auf dem Bildschirm in ReactJS angezeigt.

Question

Ich habe einen einfachen Code in ReactJS geschrieben, in dem ich View-Komponente von Store-Komponente aufrufen, indem State-Daten und updateState-Funktion als Requisiten übergeben. Die View-Komponente ruft dann die Action-Komponente auf, indem sie dieselben zwei Requisiten übergibt. Und die Action-Komponente ändert den Status der Store-Komponente und ruft ihre Funktion updateState auf, um den Status zu ändern.

Jetzt ist das Problem, dass das neu hinzugefügte Element nicht in der Liste auf dem Bildschirm angezeigt wird. Und auch ich bekomme einen Fehler (siehe unten). Also bitte sagen Sie, was das Problem in meinem Code ist?

Fehler:

index.js:1017 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `View`. See fb.me/react-warning-keys for more information. 
    in li (created by View) 
    in View (created by Store) 
    in div (created by Store) 
    in Store 

Store.jsx

import React from 'react'; 
import View from './View.jsx'; 

class Store extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     data: 
     [ 
      { 
       name: 'First', 
       id: 1 
      }, 

      { 
       name: 'Second', 
       id: 2 
      }, 

      { 
       name: 'Third', 
       id: 3 
      } 
     ] 
     } 

     this.updateState = this.updateState.bind(this); 
    }; 

    updateState(newState) { 
     this.setState({data: newState}); 
    }; 

    render() { 
     return (
     <div> 
      <View storeData={this.state.data} func={this.updateState} /> 
     </div> 
    ); 
    } 
}; 

export default Store; 

View.jsx

import React from 'react'; 
import Action from './Action.jsx'; 

class View extends React.Component { 
    render() { 
     return (
     <div> 
      <ul> 
       {this.props.storeData.map((eachObject) => (
        <li key={eachObject.id}>{eachObject.name}</li>))} 
      </ul> 
      <Action storeData={this.props.storeData} func={this.props.func} /> 
     </div> 
    ); 
    } 
} 

export default View; 

Action.jsx

import React from 'react'; 

let itemIndex=3; 

class Action extends React.Component { 
    constructor() { 
     super(); 

     this.updateStore = this.updateStore.bind(this); 
    }; 

    render() { 
     return (
     <div> 
      <input type="text" ref="input"/> 
      <button onClick={this.updateStore}>Add</button> 
     </div> 
    ); 
    }; 

    updateStore(e) { 
     const node = this.refs.input; 
     const text = node.value.trim(); 
     node.value = ''; 
     node.focus(); 

     ++itemIndex; 
     var newItem = {itemIndex, text}; 
     var storeData = this.props.storeData; 
     storeData.push(newItem); 

     this.props.func(storeData); 
    } 
} 

export default Action; 

Answer 1

Sieht aus wie Sie nicht die id oder name Eigenschaften setzen:

var newItem = { 
    id: itemIndex, 
    name: text 
}; 
var storeData = this.props.storeData; 
storeData.push(newItem); 

Sehen Sie hier für das Arbeitsbeispiel:

let itemIndex=3; 
 

 
class Action extends React.Component { 
 
    constructor() { 
 
     super(); 
 

 
     this.updateStore = this.updateStore.bind(this); 
 
    }; 
 

 
    render() { 
 
     return (
 
     <div> 
 
      <input type="text" ref="input"/> 
 
      <button onClick={this.updateStore}>Add</button> 
 
     </div> 
 
    ); 
 
    }; 
 

 
    updateStore(e) { 
 
     const node = this.refs.input; 
 
     const text = node.value.trim(); 
 
     node.value = ''; 
 
     node.focus(); 
 

 
     ++itemIndex; 
 
     var newItem = { 
 
      id: itemIndex, 
 
      name: text 
 
     }; 
 
     var storeData = this.props.storeData; 
 
     storeData.push(newItem); 
 

 
     this.props.func(storeData); 
 
    } 
 
} 
 

 
class View extends React.Component { 
 
    render() { 
 
     return (
 
     <div> 
 
      <ul> 
 
       {this.props.storeData.map((eachObject) => (
 
        <li key={eachObject.id}>{eachObject.name}</li>))} 
 
      </ul> 
 
      <Action storeData={this.props.storeData} func={this.props.func} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Store extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
     data: 
 
     [ 
 
      { 
 
       name: 'First', 
 
       id: 1 
 
      }, 
 
      { 
 
       name: 'Second', 
 
       id: 2 
 
      }, 
 
      { 
 
       name: 'Third', 
 
       id: 3 
 
      } 
 
     ] 
 
     } 
 

 
     this.updateState = this.updateState.bind(this); 
 
    }; 
 

 
    updateState(newState) { 
 
     this.setState({data: newState}); 
 
    }; 
 

 
    render() { 
 
     return (
 
     <div> 
 
      <View storeData={this.state.data} func={this.updateState} /> 
 
     </div> 
 
    ); 
 
    } 
 
}; 
 

 
ReactDOM.render(
 
    <Store />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>