javascript - 在 React.js 的列表中保存传入的多个数据

Question

如果您能帮我解决这个问题，我将不胜感激。也就是说，我有一个父组件，它从子组件获取新数据。在子组件中，数组数据被映射，因此传入父组件的数据不是一个而是多个。我想将它保存在列表标签​​内，以获取与子组件传入值一样多的列表项。

代码如下:

import React, { Component } from 'react';
import TextEnter from './TextEnter.jsx';

class Terminal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      incomingData: '',
    };
  }

  updateParent(val) {
    this.setState({
      incomingData: <li> {val} </li> // here I would like to save every incoming mapped data
    });
  }
  render() {
    return (
      <div className="terminal">
        <TextEnter
          afterCommand={this.props.afterCommand}
          triggerParent={(val) => this.updateParent(val)}
        />
        <ul className="listContainer">
          {this.state.incomingData}
        </ul>
      </div>
    );
  }
}

export default Terminal;

Answer 1

我真的不喜欢将 React Elements(用 <li> 在 jsx 文件中创建)存储为状态。我宁愿存储列表，并将其呈现方式留给 render() 函数。我会将其更改为:

import React, { Component } from 'react';
import TextEnter from './TextEnter.jsx';

class Terminal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      incomingData: [],
    };
  }

  updateParent(val) {
    this.setState({
      incomingData: this.state.incomingData.concat(val) 
    });
  }
  render() {
    const listItems = this.state.incomingData.map(item => {
      return <li>{ item }</li>
    });

    return (
      <div className="terminal">
        <TextEnter
          afterCommand={this.props.afterCommand}
          triggerParent={this.updateParent}
        />
        <ul className="listContainer">
          {listItems}
        </ul>
      </div>
    );
  }
}

export default Terminal;

请注意，我还直接传递了 this.updateParent 而不是将其包装在匿名函数中，后者应该会给出相同的结果。您会收到来自 React 的关键警告，但我不知道您有权访问哪个唯一标识符。