Question

我的主要组件中有一个构造函数：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      items: []
    } 
  };

  render() {
    return (
      <div className="App">
        <ItemList  items={this.state.items}/>       
        <AddItemForm items={this.state.items}/>
      </div>
    );
  }
}

在组件AddItemForm中，我添加了具有属性＆＃34; item_name＆＃34;的数组项对象。这是字符串和＆＃34;评论＆＃34;与数据类型对象。组件视图：

class AddItemForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      item:{}  
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({item:
     {
      item_name: event.target.value,
      comment:{}
      }
    });

  }

  handleSubmit(event) {
    event.preventDefault();
    this.props.items.push(this.state.item);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" item_name={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default AddItemForm;

如何迭代此数组以获取每个对象的所有item_name值并将其显示为我的ItemList组件中的列表？

Answer 1

这应该有所帮助。

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      items: []
    } 
  };

  addItemToItemsList = (item) => {
    const {items=[]} = this.state;
    items.push(item);
    this.setState({
      items : items
    });
  }

  render() {
    return (
      <div className="App">
        <ItemList items={this.state.items}/>       
        <AddItemForm
          items={this.state.items}
          addItemToItemsList={this.addItemToItemsList}
        />
      </div>
    );
  }
}

class ItemList extends React.Component {
  render () {
    const {items} = this.props;
    return (
      <div>
        {items.map((item, index) => {
          return (
            <div key={index}>item.item_name</div>
          )
        })}
      </div>
    );
  }
}

class AddItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      item: {
        item_name : '',
        comment:{}
      }  
    };
  }

  handleChange = (event) => {
    const new_item = Object.assign({}, this.state.item, {item_name: event.target.value});
    this.setState({
      item: new_item
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.addItemToItemsList(this.state.item);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" item_name={this.state.item.item_name} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default AddItemForm;

Answer 2

我认为，你在AddItemForm中有一个错误，你应该将onSubmit函数从App传递给AddItemForm并通过这个函数更改项目：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }

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

  handleSubmit(value){
    this.setState({
      items: this.state.items.concat(value)
    })
  }

  render() {
    return (
      <div className="App">
        <ItemList items={this.state.items} />
        <AddItemForm 
          onSubmit={this.handleSubmit}
          items={this.state.items} />
      </div>
    );
  }
}

关于主要问题，解决这个问题的方法之一

const ItemList = ({items}) => (
  <div>
    {items.map( (item, index)=> (
      <div key={index}>{item.item_name}</div>
    ))}
  </div>
);

这里有完整的工作示例：https://codesandbox.io/s/7k624nz94q

Answer 3

您无法直接添加到阵列。您需要传递一个回调，该回调将添加到父组件状态中的数组中。使用react时这是一种非常常见的模式。

以下是您需要做的一个框架：

在您的父组件中，您不需要将整个列表传递给AddItemForm组件，只需将一个addItem回调传递给您的子组件：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      items: []
    }
    this.addItemToList = this.addItemToList.bind(this); 
  };

  render() {
    return (
      <div className="App">
        <ItemList  items={this.state.items}/>       
        <AddItemForm addItemToList={this.addItemToList}/>
      </div>
    );
  }

  addItemToList(newValue) {
    // Here you add the item to your state
    // Always treat your state as immutable, so create a copy then add the item, then set your new State
    const newArray = this.state.items.slice(); // clone
    newArray .push(newValue); // Add value
    this.setState({items: newArray}); // Set the new state
  }
}

有关如何将项目添加到此处状态的数组的详细信息：React.js - What is the best way to add a value to an array in state

然后在子组件中使用该回调：

  handleSubmit(event) {
    event.preventDefault();
    // this.props.items.push(this.state.item);
    // Here don't mutate the props, instead call the callback to add the item to your parent's component's state
    this.props.addItemToList(this.state.item);
  }

要显示商品列表，您需要使用map功能：https://reactjs.org/docs/lists-and-keys.html#rendering-multiple-components

如何在ReactJS中迭代具有属性的对象数组？

3 个答案: