Question

我正在尝试在函数内部进行切换，并且使用了react hooks。开关工作正常，但我无法返回组件。为什么？这个想法是，当我遍历数组时，我将在那时加载所有他的数据的相应组件。

export default function Content({content}) {

const [contentBooks, setContentBooks] = useState(null);
const [contentFilms, setContentFilms] = useState(null);

async function data() {

    return await Promise.all(content.map(element => element.content).map(async item => {
        if (item.type == 'DETAIL') {
            switch (item.type) {
                case 'BOOKS':
                    const bookstype = await axios.get(`url`)
                    setContentBooks(bookstype)
                    return <Componen1 info={contentBooks} // --> not work
                case 'FILMS':
                    const filmstype = await axios.get(``)
                    setContentFilms(filmstype)
                    return <Componen2 info={contentFilms} // --> not work

                default:
                    return null;
            }
        }
    }))
  }

 useEffect(() => {
    const fetchData = async () => {
       const result = await data()
  };

   fetchData();
}, [content]); 



return (
   <React.Fragment></React.Fragment>
   )

}

Answer 1

您可能需要以下资源：https://www.robinwieruch.de/react-pass-props-to-component/

我认为这不是在react中调用组件的正确方法

Answer 2

这有很多错误。首先，您的组件没有结束标记，甚至不确定如何编译。

<Componen2 info={contentFilms}/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>

接下来，您将对调用该组件的方式进行一番探讨。一次加载一次，而不是在使用效果中加载。

使用switch和Hooks返回组件数据

2 个答案: