состояние не обновляется при использовании React Hooks - PullRequest
Новая
       8

состояние не обновляется при использовании React Hooks

0 голосов
/ 04 марта 2019

В настоящее время я играю с новой функцией React Hooks, и я столкнулся с проблемой, когда состояние функционального компонента не обновляется, хотя я считаю, что я все делаю правильно, еще одна пара глаз на этот тестПриложение будет высоко ценится. 

import React, { useState, useEffect } from 'react';

const TodoList = () => {
  let updatedList = useTodoListState({ 
    title: "task3", completed: false 
  });
const renderList = () => {
  return (
    <div>
      {
        updatedList.map((item) => {
          <React.Fragment key={item.title}>
            <p>{item.title}</p>
          </React.Fragment>
        })
      }
    </div>
  )
}
return renderList();
}

function useTodoListState(state) {
  const [list, updateList] = useState([
    { title: "task1", completed: false },
    { title: "task2", completed: false }
  ]);
  useEffect(() => {
    updateList([...list, state]);
  })
  return list;
}

export default TodoList;

updateList в функции useEffect объекта useTodoListState должен обновлять переменную списка для хранения трех фрагментов данных, однако это не так.

1 Ответ

0 голосов
/ 04 марта 2019

У вас есть несколько проблем здесь:

  1. В renderList вы неправильно используете React.Fragment.Его следует использовать для переноса нескольких узлов DOM, чтобы компонент возвращал только один узел.Вы упаковываете отдельные элементы абзаца, каждый в свой фрагмент.
  2. Что-то нужно возвращать на каждой итерации map.Это означает, что вам нужно использовать ключевое слово return.(См. этот вопрос для получения дополнительной информации о синтаксисе функции стрелки.)
  3. Ваш код будет обновляться бесконечно, поскольку useEffect обновляет свое собственное состояние ловушки.Чтобы исправить это, вам нужно включить массив в качестве второго аргумента в useEffect, который скажет React использовать этот эффект только при изменении данного массива.

Вот как все это должно выглядеть (с некоторым переформатированием): 

import React, { useState, useEffect } from 'react';

const TodoList = () => {
  let updatedList = useTodoListState({
    title: "task3", completed: false
  });

  return (
    <React.Fragment> // #1: use React.Fragment to wrap multiple nodes
      {
        updatedList.map((item) => {
          return <p key={item.title}>{item.title}</p> // #2: return keyword inside map with braces
        })
      }
    </React.Fragment>
  )
}

function useTodoListState(state) {
  const [list, updateList] = useState([
    { title: "task1", completed: false },
    { title: "task2", completed: false }
  ]);

  useEffect(() => {
    updateList([...list, state]);
  }, [...list]) // #3: include a second argument to limit the effect

  return list;
}

export default TodoList;

Редактировать:
Несмотря на то, что я проверял, работает ли приведенный выше код, в конечном итоге было бы лучше переработать структуру для удаления updateList из useEffect или реализовать другуюпеременная для управления обновлением.

...