Блог

Главная - Вопросы по программированию - Как указать тип

Как указать тип

#reactjs #typescript

Вопрос:

Я изучаю машинопись.

Я использовал axios и сохранил возвращаемое api-значение в useEffect и отобразил его на экране, но я получил сообщение об ошибке, в котором говорится, что в интерфейсе ToDoList нет имени. В чем причина?

Спасибо.

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

interface todoList {
    name: string
    age: number
}

function App() {

    const defaultProps: todoList[] = [];
    const [todoList, setTodoList]: [todoList[], (todoList: todoList[]) => void] = useState(defaultProps);

  useEffect(() => {
        async function getTodo() {
            const response = await axios.get('http://localhost/laravel/public/api/todo');
        setTodoList(response.data);
        }
       getTodo();
  }, []);

  return (
      <div className="App">
          {todoList.name} // Error here.
    </div>
  );
}

export default App;

Ответ №1:

Пункт 1: Это связано с тем, что пользовательский интерфейс отображается перед использованием, и, следовательно, в тот момент, когда пользовательский интерфейс отображается, он ищет todolist.name где todolist пуст, а выборка имени приводит к ошибке. Если должно отображаться конкретное имя каких-либо элементов, проверьте длину массива, чтобы имя не было пустым, прежде чем сопоставлять его с пользовательским интерфейсом

Пункт 2: Если все имена должны быть помещены в пользовательский интерфейс, затем сопоставьте массив, как показано ниже

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

  function App() { 
  const [todoList, setTodoList] = useState([]);
  useEffect(() => {
  async function getTodo() {
  const response = await axios.get('http://localhost/laravel/public/api/todo');
  setTodoList(response.data);
   }
 getTodo();
 }, []);

 return (
  <div>
    {todoList.map((todo) =>
    <p> {todo.name} </p>
    )}
  </div>
 );
  }

 export default App;

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

1. Таким образом, пользовательский интерфейс отображается до эффекта использования. Я многому научился. Спасибо.

2. Приятно слышать, что это было полезно 🙂

Ответ №2:

Ваша todoList переменная представляет собой массив todoList s, например todoList[] . Вы пытаетесь прочитать .name массив, который не определен.

Вероятно, вы хотите отобразить список элементов:

 return <div className="App">
    {todoList.map(todo => <div key={todo.name}>
        {todo.name}
    </div>)}
</div>;

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

 const [todoList, setTodoList] = useState<todoList>(defaultProps);

С помощью того , как React объявил тип useState , вы можете использовать useState<T> , и он автоматически узнает, что возвращает a [T, (value: T) => void] .

Еще одно небольшое примечание: Обычно интерфейсы/типы являются PascalCase, например TodoList , чтобы убедиться, что они не конфликтуют с переменными и параметрами функций, которые обычно имеют camelCase, например, ваша todoList переменная.

Метки: