Блог

Главная - Вопросы по программированию - Данные из серверной части не отображаются, когда вы назначаете их новому объекту на переднем конце

Данные из серверной части не отображаются, когда вы назначаете их новому объекту на переднем конце

#reactjs

Вопрос:

Вопрос, у меня есть этот список задач, поступающий с моего бэкенда, я не знаю, почему мои данные не отображаются, когда я назначаю это новому объекту. Я планирую создать компонент задачи перетаскивания.

Данные
введите описание изображения здесь

 const BoardView = ({ datas, showTask, taskInfo }) => {
const [filteredList, setFilteredList] = useState(datas);

const listColumns = {
    [uuidv4()]: {
      name: 'Proposed',
      items: filteredList,
    },
    [uuidv4()]: {
      name: 'In Progress',
      items: [],
    },
    [uuidv4()]: {
      name: 'Review',
      items: [],
    },
    [uuidv4()]: {
      name: 'Done',
      items: [],
    },
  };

console.log(datas) => data is appearing
return (
    <>
      <div className='w-full p-8 grid grid-flow-col grid-cols-4 gap-8'>
        <DragDropContext
          onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
        >
          {Object.entries(columns).map(([columnId, column], index) => {
            return (
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                }}
                key={columnId}
              >
                {console.log(column.item)} => there's no data
              </div>
            );
          })}
        </DragDropContext>
      </div>
    </>
  );
};

Выход

введите описание изображения здесь

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

1. Данные должны быть присвоены переменной состояния , если вам нужно отразить это в своем шаблоне

2. Я также сначала присваиваю данные переменной состояния, но результат тот же.

3. @rjc30 это связано с тем , что, когда назначено состояние ( datas ) filteredList , данные еще не были извлечены. Попробуйте выполнить внутреннюю выборку данных в BoardView компоненте

4. @rjc30 Где находится значение настроек для columns

5. Я глуп, я забыл установить переменную с помощью useEffect. Спасибо за помощь, ребята!

Ответ №1:

При загрузке компонента происходит попадание в конечную точку API. В настоящее время ваш компонент загружен, а данные еще не извлечены. Итак, мы получим данные, а затем отрисоваем компонент
Для этого, обернем логику извлечения данных в useEffect крючок, где вы сделаете 2 вещи —

  1. Извлеките данные
  2. Заполните состояние полученными данными

Что-то вроде :

 const BoardView = ({ datas, showTask, taskInfo }) => {
    const [filteredList, setFilteredList] = useState(datas);
    
    const listColumns = {
        [uuidv4()]: {
          name: 'Proposed',
          items: filteredList,
        },
        [uuidv4()]: {
          name: 'In Progress',
          items: [],
        },
        [uuidv4()]: {
          name: 'Review',
          items: [],
        },
        [uuidv4()]: {
          name: 'Done',
          items: [],
        },
    };
    
    useEffect(async () => {
        // 1. => Fetching the data using "fetchAPI" or "axios". I have chosen axios as it is easier to work with
        const results = await axios.get('API__ENDPOINT')
        
        // 2. => Populate the state of this current component with fetched data 
        setFilteredList(results)
    },[results])
    
    console.log(datas) => data is appearing
    return (
        <>
          <div className='w-full p-8 grid grid-flow-col grid-cols-4 gap-8'>
            <DragDropContext
              onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
            >
              {Object.entries(columns).map(([columnId, column], index) => {
                return (
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                    }}
                    key={columnId}
                  >
                    {console.log(column.item)} => there's no data
                  </div>
                );
              })}
            </DragDropContext>
          </div>
        </>
      );
    };
Метки: ,