values.map在传递状态并映射当前状态时，映射不是函数n reactjs

发布于 2025-02-11 16:26:57 字数 1494 浏览 3 评论 0原文

我已经将usestate Hook中的一系列对象作为初始状态，我想使用其他组件中的MAP方法对其进行迭代，我已将当前状态作为另一个对象中的Prop传递，并在其上使用了MAP方法，但是控制台消息是仍然显示值。映射不是一个函数，我知道我们只能在数组上使用映射方法，我只能显示错误。

创建状态并传递了一系列对象 -

    const [values, setValues] = useState([
    {
      name: "Vansh",
      age: 22,
      email: "[email protected]",
    },
  ]);

传递的值作为

<Home
                addFormData={addFormData}
                setAddFormData={setAddFormData}
                values={values}
                setValues={setValues}
              />

我的家庭组件的家用代码中的props-

const Home = ({ values }) => {   return (
    <div>
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>email</th>
          </tr>
        </thead>
        <tbody>
          {values.map((val, index) => (
            <tr>
              <td key={val.index}>{val.name}</td>
              <td key={val.index}>{val.age}</td>
              <td key={val.index}>{val.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Link to="/form">
        <button>FORM</button>
      </Link>
    </div>   ); };

原文

I have passed an array of objects in useState hook as the initial state and i want to iterate over it using map method in other component, i have passed the current state as prop in the other object and have used map method over it but console message still shows values.map is not a function, i know we can only use map method on array i have done that only still the error shows.

created state and passed an array of objects-

    const [values, setValues] = useState([
    {
      name: "Vansh",
      age: 22,
      email: "[email protected]",
    },
  ]);

Passed values as props in Home component-

<Home
                addFormData={addFormData}
                setAddFormData={setAddFormData}
                values={values}
                setValues={setValues}
              />

Code of my home component-

const Home = ({ values }) => {   return (
    <div>
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>email</th>
          </tr>
        </thead>
        <tbody>
          {values.map((val, index) => (
            <tr>
              <td key={val.index}>{val.name}</td>
              <td key={val.index}>{val.age}</td>
              <td key={val.index}>{val.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Link to="/form">
        <button>FORM</button>
      </Link>
    </div>   ); };

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仙气飘飘 2025-02-18 16:26:57

请查看代码在您丢失的导出下方的良好导出。

 const Home = ({ values }) => {
  // console.log(values);
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>email</th>
          </tr>
        </thead>
        <tbody>
          {values.map((val, index) => (
            <tr>
              <td key={val.index}>{val.name}</td>
              <td key={val.index}>{val.age}</td>
              <td key={val.index}>{val.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
export default Home;

请参阅代码

Please see the code it's working fine export below your missing export.

 const Home = ({ values }) => {
  // console.log(values);
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>email</th>
          </tr>
        </thead>
        <tbody>
          {values.map((val, index) => (
            <tr>
              <td key={val.index}>{val.name}</td>
              <td key={val.index}>{val.age}</td>
              <td key={val.index}>{val.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
export default Home;

Please see the code SandBoxLink

回复收藏 0 原文

~没有更多了~