0

Два дня ломаю голову, не могу найти ошибку, гуру React помогите. Вот код -

"use strict";

function TitleName(props) {
    return <h1 className="TitleName">TitleName</h1>;
}

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tasksArray: [],
            value: ''
        }
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            value: e.target.value
        });  
    }

    onSubmit(e) { 
        e.preventDefault();
        const newItem = {
            value: this.state.value,
            id: this.state.tasksArray.length
        };
        this.setState(e => ({
            tasksArray: e.tasksArray.concat(newItem),
            value: ''
        }));
    }

    render() {
        return (
            <div>
            <TitleName/>
                <form onSubmit={this.onSubmit}>
                    <input placeholder="Введите задачу" value={this.state.value} onChange={this.onChange}/>
                    <input type="submit" value="Добавить задачу"/>
                </form>
            <TodoTask tasks={this.state.tasksArray}/>  
            </div>          
        );
    }
}

class TodoTask extends React.Component {
    render() {
        const tasks = this.props.tasks.forEach(currentValue => {
            return (
               <li key={currentValue.id}>
                    {currentValue.value}
                    <button type="submit" id={currentValue.id}>Delete</button>
                </li>   
            );

        });
        return (
            <ul>
                {tasks}
            </ul>  
        );
    }
}

ReactDOM.render(
    <TodoList />,
    document.querySelector("#main")
);

Задачи tasks не выводятся, ul тэг есть, а li - нет.

5
  • что за ошибка-то?
    – Grundy
    22 сен 2019 в 18:03
  • @Grundy ошибки нет, просто задачи не выводятся, ul есть , а li нет
    – mbfilipp
    22 сен 2019 в 18:12
  • Вы, наверно, вместо forEach хотели map написать ?
    – Spatz
    22 сен 2019 в 19:48
  • Не понимаю в чем разница в данном случаи, и вывод один и тот же)
    – mbfilipp
    22 сен 2019 в 20:10
  • например разница в том, что forEach ничего не возвращает
    – Grundy
    22 сен 2019 в 20:29

1 ответ 1

1

Проблема в том, что в методе рендеринга Вы использовали метод forEach():

Метод forEach() выполняет указанную функцию один раз для каждого элемента в массиве. Возвращаемое значение - undefined.

Метод forEach() ничего не возвращает, поэтому Вы не видите <li>...</li> тэгов. Для того, чтобы их увидеть - необходимо использовать метод map():

Метод map() создаёт новый массив с результатом вызова указанной функции для каждого элемента массива. Возвращаемое значение - новый массив, где каждый элемент является результатом callback функции.

Таким образом Ваш код должен выглядеть примерно так (можно обойтись без переменной tasks и мапить результат сразу, но это уже другая история):

render() {
  const tasks = this.props.tasks.map(currentValue => {
    return (
      <li key={currentValue.id}>
        {currentValue.value}
        <button type="submit" id={currentValue.id}>Delete</button>
      </li>   
    );
  });

  return (
    <ul>
      {tasks}
    </ul>  
  );
}
1
  • 1
    Просто нереально вам вам благодарен, спасибо
    – mbfilipp
    23 сен 2019 в 13:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.