Блог

Главная - Вопросы по программированию - Попытка изменить мои данные во время вызова .map

Попытка изменить мои данные во время вызова .map

#reactjs #typescript #axios

#reactjs #typescript #axios

Вопрос:

Во время .map из массива данных у меня есть другой массив данных, который мне также нужен для создания .map внутри него. Это выглядит примерно так

Первая загрузка данных

 async function handleSubmit(event: FormEvent){
    event.preventDefault();
    await api.get(`people/?search=${input}`).then(response =>{
        setCharacters(response.data.results)
    })
}

Вторая загрузка данных

    async function getFilmName(film: string) {
        const movie = film.split("/");
        await api.get(`films/${movie[5]}`).then(response =>{
           return(response.data.title)
        })
  }

и затем .map

  {characters.map(characters =>{
            return (
                <div>
                    <Link to={`character/${characters.url.split("/")[5]}`}>{characters.name}</Link>
                    {characters.films.map((films) =>{
                        return(
                            <h5>{getFilmName(films)}</h5>
                        )
                    })}
                </div>
            )
        })}

и, в конце концов, я получаю

 Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

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

1. {characters.map(**** characters **** =>{ Здесь вы можете использовать другое имя здесь?

Ответ №1:

getFilmName это объект Promise . Поэтому он не может получить имя файла в контексте JSX. Поэтому вам нужно использовать его в useEffect или другом обработчике событий, и вам нужно сохранить данные state . И вы можете отображать правильные данные.

И в этом случае вы можете создать какой-нибудь новый компонент, например,

 function FileName ({file}){
  const [fileName,setFileName] = useState("")
  const getFileName = useCallback(async ()=> {...},[file])
  useEffect(()=>{
      getFileName()
  },[getFileName])
  return (<h5>{fileName}</h5>)
}

Ответ №2:

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

  {characters.map(character =>{
            return (
                <div>
                    <Link to={`character/${character.url.split("/")[5]}`}>{character.name}</Link>
                    {character.films.map((films) =>{
                        return(
                            <h5>{getFilmName(films)}</h5>
                        )
                    })}
                </div>
            )
        })}
Метки: