反应-列表元素文本未显示

Question

我正在反应中创建一个简单的待办应用。我有三个组成部分。负责显示项目的组件（“项目”组件）正在显示项目符号，而不是文本。这是我的代码， （编辑）

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { list: [] };
    this.addItem = this.addItem.bind(this);
  }

  addItem(val) {
    let updated = [...this.state.list, val];
    this.setState({ list: updated });
  }

  render() {
    return (
      <div className="App">
        <Title itemCount={this.state.list.length}></Title>
        <Add addItem={this.addItem}></Add>
        <Items items={this.state.list}></Items>
      </div>
    );
  }
}

//Items.js
const Items = ({ items }) => {
  return (
    <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item.text}
                </li>
            )}
            </ul>
        </div>
  );
};

编辑2： 这是一张图片：

如何使其显示文字？预先感谢！

Answer 1

我可以看到列表没有text属性，因此可以解决此问题：

const Items = ({ items }) => {
  return (
    <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item}
                </li>
            )}
            </ul>
        </div>
  );
};

Answer 2

在您的代码中：

{items.map((item, index) => 
  <li key={index}>
    {item.text}
  </li>
)}

被破坏的item没有名为text的属性，在这种情况下，item承载着您的文本。因此，您只需要删除.text，即可将代码更改为此。

<li key={index}>
    {item}
</li>