Question

我在ReactJS中编写了一个简单的代码，我通过将状态数据和updateState函数作为props传递来调用Store组件中的View组件。 View组件然后通过传递相同的两个道具来调用Action组件。 Action组件修改Store组件的状态并调用其函数updateState来修改状态。

现在问题是新添加的项目没有显示在屏幕上可见的列表中。而且我收到一个错误（如下所示）。请告诉我代码中的问题是什么？

错误：

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

您似乎没有设置id或name属性：

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

请点击此处查看工作示例：

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>

ReactJS中屏幕上未显示新添加的项目

1 个答案: