Блог

Главная - Вопросы по программированию - Текст элемента React-list не отображается

Текст элемента React-list не отображается

#javascript #arrays #reactjs

#javascript #массивы #reactjs

Вопрос:

Я создаю простое приложение todo в react. У меня есть три компонента. Компонент, отвечающий за отображение элементов (компонент ‘Item’), отображает маркеры, но не текст. Вот мой код, (редактировать)

 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:
Вот изображение:
введите описание изображения здесь

Как я могу заставить его отображать текст? Заранее спасибо!

Комментарии:

1. Многострочный JSX необходимо заключить в фигурные скобки — либо отформатируйте .map(.. оператор return в виде одной строки, либо оберните часть JSX в ()

2. вы убедились, что у ваших элементов есть text поле? возможно, проблема в Add компоненте

3. Я отредактировал Items.js часть кода.

4. распечатайте список после добавления элемента, чтобы мы могли видеть список, чтобы распечатать его, вы можете сделать это, заменив setState в addItem на this this.setState({ список: обновлено }, () => console.log(this.state.list));

Ответ №1:

Я вижу, что у списка нет свойства text, так что вот исправление:

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

Ответ №2:

В вашем коде:

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

у destructed item нет вызываемого свойства text , item в этом случае он содержит ваш текст. Итак, вам просто нужно удалить .text изменить свой код на это.

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