时间戳

首页 > 解决方案 > 无法在 React 中映射数组

javascript - 无法在 React 中映射数组

问题描述

我通过道具将数组（数据）传递给组件，但是我无法映射数据。

const Component1 = ({ data }) => {

  console.log(data);

  const renderData = () =>
      data.map(singleItem => (
          <OtherComponent key={singleItem ._id} singleItem ={singleItem} />
      ));

return (
            <Row className="row--small-padding">{renderData()}</Row>
    );

console.log(data)按预期返回对象数组，但是，数据没有传递给另一个组件。我假设在获取数据之前正在渲染？

我的数据获取函数如下所示：

const fetchAllData = async () => {
        const response = await getData();
        const data = await response;
        setData(data);
    };

    useEffect(() => {
        fetchAllData();
    }, []);

我已经通过data &&在 map 函数之前添加来解决这个问题，但是数据正在通过许多组件传递，我想知道是否还有其他解决方案？如何设置我的组件以等待获取数据然后渲染？

编辑：数据数组初始状态设置为空，像这样：

const Component= () => {
    const [data, setData] = useState(null);

    const fetchAllData = async () => {
        const response = await getData();
        const data = await response;
        setSources(data);
    };

    useEffect(() => {
        fetchAllData();
    }, []);

    return (
        <>
            <Component1 limit={4} data={data} />
            <Component2 limit={4} data={data} />
            <Component3 limit={4} data={data} />
        </>
    );
};

export default Component

标签： javascriptreactjsreact-props

解决方案

您必须将该renderData方法放在功能的返回中Component。

推荐阅读