Question

这个问题可能已经被问过无数次了，我看了一百个不同的地方，尝试了 100 种不同的方法，使用越来越少的 useEffects 并在这里和那里返回，但我无法解决它！

我正在尝试显示电影列表中的内容，但无法显示。我可以在日志中看到我在第二个 useEffect 的“电影”中确实有我需要的东西，但它不产生任何元素，我只得到包装 div。

我的代码：

const SideScroller = ({scrollerName, titles}) => {
    const [movies, setMovies] = useState([]);
    const [content, setContent] = useState();

    useEffect(() => {
        let moviesTemp = [];
        
        titles.forEach(title => {
            async function fetchData() {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            fetchData();
        });
        setMovies(moviesTemp);
    }, [titles])
   
    useEffect(() => {
        console.log(movies)
        setContent(() => {
            return (
                movies.map((movie) => {
                    console.log(movie);
                    return (
                        <div className='scrollerItem'>
                            <img src={movie.Poster} alt={movie.Title}  />
                            <p>{movie.Title}</p>
                        </div>
                    );
                })
            );
        });
    }, [movies])

    return (
        <div className='sideScroller'>
            {content}
        </div>
    )
}

Answer 1

<块引用>

试试这个

setContent(() => {
movies.map((movie) => {
console.log(movie);
return (
<div className='scrollerItem'>
<img src={movie.Poster} alt={movie.Title}  />
<p>{movie.Title}</p>
</div>
);
})
});

Answer 2

您将 forEach 的承诺丢在地板上，而不是等待它。这其实和著名的How do I return the response from an asynchronous call?

    useEffect(() => {
        let moviesTemp = [];
        
        const fetch = async () => {
         await Promise.all(titles.map(title => {
            async function fetchData() {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            return fetchData();
         }));
         setMovies(moviesTemp);
        }
        fetch();
    }, [titles])

然后我为了好玩而重写了它（不是因为它一定比其他方式“更好”）：

    useEffect(() => {
        const moviesTemp = [];
        const fetch = async (title) => moviesTemp.push(await getMovie(title))
        const fetchAll = async () => {
          await Promise.all(titles.map(fetch)); 
          setMovies(moviesTemp);
        }
        fetchAll();
    }, [titles])

编辑：为了解决您的第二个问题（在评论中），这是因为您已经改变了状态。

这是一件非常奇怪的事情，但让我试着解释一下：

    useEffect(() => {
        let moviesTemp = [];
        
        titles.forEach(title => {
            async function fetchData() {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            fetchData();
        });
        setMovies(moviesTemp);
    }, [titles])

您立即（因为 forEach 是同步的，而不管它在每次迭代中执行异步函数的事实）已将新状态设置为 moviesTemp，但是随后，您异步修改了 {{1 }} 这与变异状态完全相同。如果你在 react 中改变东西，它就不起作用。

另外，你不应该有第二个效果，这就是你的完整和最终组件应该是什么样子：

moviesTemp

Answer 3

试试这个：

 

<?xml version = '1.0' encoding = 'UTF-8'?>
<tns:Root-Element xmlns:jca="http://xmlns.oracle.com/pcbpel/wsdl/jca/" xmlns:ns2="http://xmlJSON.com/ServiceName" xmlns:ns1="http://xmlns.oracle.com/pcbpel/adapter/db/ad/FBDI" xmlns:plnk="http://docs.oasis-open.org/wsbpel/2.0/plnktype" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:plt="http://schemas.xmlsoap.org/ws/2003/05/partner-link/" xmlns:client="http://xmlns.oracle.com/adPELProcess" xmlns:tns="http://Invoice.com/ServiceName">
   <tns:P_ITEM>
      <tns:AccountingDate/>
      <tns:BusinessUnit>string6</tns:BusinessUnit>
      <tns:ProcurementBU/>
      <tns:InvoiceNumber>1</tns:InvoiceNumber>
      <tns:InvoiceCurrency/>
      <tns:InvoiceAmount>200</tns:InvoiceAmount>
      <tns:InvoiceDate>string24</tns:InvoiceDate>
      <tns:Supplier>string42</tns:Supplier>
      <tns:SupplierSite>string44</tns:SupplierSite>
      <tns:PaymentCurrency>string34</tns:PaymentCurrency>
      <tns:InvoiceType>string32</tns:InvoiceType>
      <tns:Description>string19</tns:Description>
      <tns:TermsDate>string38</tns:TermsDate>
      <tns:Requester>string40</tns:Requester>
      <tns:invoiceLines>
         <tns:LineNumber>1</tns:LineNumber>
         <tns:LineType/>
         <tns:LineAmount>67</tns:LineAmount>
         <tns:Description>string57</tns:Description>
         <tns:DistributionCombination>string59</tns:DistributionCombination>
      </tns:invoiceLines>
      <tns:invoiceLines>
         <tns:LineNumber>2</tns:LineNumber>
         <tns:LineType/>
         <tns:LineAmount>153</tns:LineAmount>
         <tns:Description>string143</tns:Description>
         <tns:DistributionCombination>string145</tns:DistributionCombination>
      </tns:invoiceLines>
    
   </tns:P_ITEM>
   <tns:P_ITEM>
      <tns:AccountingDate/>
      <tns:BusinessUnit>string178</tns:BusinessUnit>
      <tns:ProcurementBU/>
      <tns:InvoiceNumber>2</tns:InvoiceNumber>
      <tns:InvoiceCurrency/>
      <tns:InvoiceAmount>3</tns:InvoiceAmount>
      <tns:InvoiceDate>string196</tns:InvoiceDate>
      <tns:Supplier>string214</tns:Supplier>
      <tns:SupplierSite>string216</tns:SupplierSite>
      <tns:PaymentCurrency>string206</tns:PaymentCurrency>
      <tns:InvoiceType>string204</tns:InvoiceType>
      <tns:Description>string191</tns:Description>
      <tns:TermsDate>string210</tns:TermsDate>
      <tns:Requester>string212</tns:Requester>
       
      <tns:invoiceLines>
         <tns:LineNumber>99999999</tns:LineNumber>
         <tns:LineType/>
         <tns:LineAmount>239</tns:LineAmount>
         <tns:Description>string229</tns:Description>
         <tns:DistributionCombination>string231</tns:DistributionCombination>
      </tns:invoiceLines>
   </tns:P_ITEM>
</tns:Root-Element>

反应元素未显示

3 个答案: