reactjs - 子组件没有从父组件获取数据

Question

在 React 中，我无法让子组件从父组件接收数据。在 app.js 中记录数据变量时，它显示了它应该显示的内容，在子组件中我收到无法读取未定义映射并将其记录在子组件中的错误返回未定义，因为里面没有任何内容

App.js 中的代码

const [data, setData] = useState(0);

useEffect((loading) => {
  const data = array.map((item) => {
    const getData = async () => {
      const value = await getValue(item);
      setData((prev) => [...prev, value]);
    };
    return getData();
  });
}, []);
console.log('data', data); // all good inside app.js

return (
  <>
    <Child data={data} />
  </>
);

这是子组件：

export default function Child({ data }) {
  console.log(data); //nothing
  return (
    <>
      {data.map((item) => (
        <div>{item}</div>
      ))}
    </>
  );
}

标签： reactjsuse-effect

Answer 1

const [data, setData] = useState(0);

应该是

const [data, setData] = useState([0]);

由于 ifdata最初是一个数字，因此data.map内部Child不起作用。

密码箱