reactjs - 尝试在 .map 调用期间更改我的数据

Question

在一个数据数组的 .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.

Answer 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>)
}