Reactjs 从useState钩子映射呈现项目

我使用

useffect

调用了我的api，并使用

useState

hook存储了项目数组，但我发现很难将这些项目呈现到一个自定义组件中，该组件也会传递数据

以下是我的代码片段：

export default function CreateCast() {

 const [open, setOpen] = useState(false);
 const [bibleCastItems, setBibleCastItems] = useState([]);

 const classes = useStyles();

 const fabStyle = {
   bottom: 50.0,
   right: 30.0,
   position: "fixed"
 };

 useEffect(()=>{
   async function fetchData(){
    var items = await APIService.getAllBibleCasts();
    // console.log(items);
    // console.log(items.data.bibleCasts);
    setBibleCastItems([items.data.bibleCasts]); 
    // items.data.bibleCasts.length > 0 ? setBibleCastItems([items.data.bibleCasts]) 
    // : setBibleCastItems([]);
  }
  fetchData();
  }, []
);

// console.log('bibleCastItems length ' + bibleCastItems.length);

return (
  <GridContainer>
    <GridItem xs={12} sm={12} md={12}>
      <Card plain>
        <CardHeader plain color="primary">
         <div className={classes.container}>
           <div className={classes.left}>
           <h4 className={classes.cardTitleWhite}>All BibleCasts</h4>
           <p className={classes.cardCategoryWhite}>
             Powered by our friends from <b>Unicorn Tech Consultants</b>{" "}
           </p>
         </div>
        </div>
       </CardHeader>
       <CardBody>
         {
           bibleCastItems.map((item, index) => <CastItem key={index} bibleCast={item[index]}/>) // this is where I'm facing issue
           // bibleCastItems.map((item, index) => {
            // console.log(item);
            // setMyItem(item);
            // return <div key={index}>{index}</div>
          // })
        }
        <div className={classes.right}>
            <Fab style={fabStyle} onClick={handleClickOpen}>
              <AddIcon />
            </Fab>
            <UploadFormDialog 
              open={open}
              handleClose={handleClose}
            />
        </div>           
      </CardBody>
    </Card>
  </GridItem>
 </GridContainer>
);

function handleClickOpen(){
  setOpen(true);
};

function handleClose(){
  setOpen(false);
};

}

如果您要创建一个状态变量，将此响应表示为一个列表并显示该列表，您将如何使用钩子进行操作。非常感谢。 [1]:

---

[2] ：

您所犯的错误是在CreateCast组件、表单api中，您已经再次获得了一个数组，您正在数组中传递它，所以它是以嵌套数组的形式出现的

你喜欢这样吗

useEffect(()=>{
   async function fetchData(){
    var items = await APIService.getAllBibleCasts();
    setBibleCastItems(items.data.bibleCasts); 
  }
  fetchData();
  }, []
);

{
           bibleCastItems.map((item, index) => <CastItem key={index} bibleCast={item}/>) 
        }

对于映射，您可以这样做

useEffect(()=>{
   async function fetchData(){
    var items = await APIService.getAllBibleCasts();
    setBibleCastItems(items.data.bibleCasts); 
  }
  fetchData();
  }, []
);

{
           bibleCastItems.map((item, index) => <CastItem key={index} bibleCast={item}/>) 
        }

{
bibleCastItems.map（（项目，索引）=>）
}

//有关如何从子项更新父项的问题，请参见以下内容

有两种方法可以在父组件中设置数据，一种是从api重新蚀刻，或者从子组件传递到父组件并更新其中的状态

我这里有一个例子，如何更新父级和子级，向列表中添加名称，在父级组件中维护名称列表状态，子级将通过添加名称将值传递回父级

import { useState } from "react";
import Child from "./Child";

export default function Parent() {
  const [list, setList] = useState(["ram"]);

  const handleAddName = (name) => {
    if (name) {
      setList([name, ...list]);
  // or you can refetch the list from api here

    }
  };
  return (
    <div>
      <div style={{ float: "left" }}>
        <h1>I am a parent Component</h1>
        <ul>
          {list &&
            list.map((item) => {
              return <li key={item}>{item}</li>;
            })}
        </ul>
      </div>

      <Child handleSubmit={handleAddName} />
    </div>
  );
}

从“react”导入{useState}；
从“/Child”导入子项；
导出默认函数父函数（）{
const[list，setList]=useState（[“ram”]）；
const handleAddName=（名称）=>{
如果（姓名）{
集合列表（[名称，…列表]）；
//或者，您也可以在此处从api中重新提取列表
}
};
返回(
我是一名家长

{列表&&
list.map（（项目）=>{
返回
{item}
；
})}

);
}

孩子

从“react”导入{useState}；
导出默认函数子项（道具）{
const[name，setName]=useState（“”）；
常量updateNameList=（名称）=>{
如果（姓名）{
道具。手持提交（名称）；
//发送数据后重置字段
//您还可以在此处保存数据，以生成post请求各自的api
集合名（“”）；
}
};
返回(
我是一个孩子
在下面添加名称



setName（e.target.value）}/>
updateNameList（名称）}>Add
);
}

请参阅此代码和方框

---

您所犯的错误是在CreateCast组件中，表单api中您已经再次获得了一个数组，您正在数组中传递它，所以它是以嵌套数组的形式出现的

你喜欢这样吗

useEffect(()=>{
   async function fetchData(){
    var items = await APIService.getAllBibleCasts();
    setBibleCastItems(items.data.bibleCasts); 
  }
  fetchData();
  }, []
);

{
           bibleCastItems.map((item, index) => <CastItem key={index} bibleCast={item}/>) 
        }

对于映射，您可以这样做

useEffect(()=>{
   async function fetchData(){
    var items = await APIService.getAllBibleCasts();
    setBibleCastItems(items.data.bibleCasts); 
  }
  fetchData();
  }, []
);

{
           bibleCastItems.map((item, index) => <CastItem key={index} bibleCast={item}/>) 
        }

{
bibleCastItems.map（（项目，索引）=>）
}

//有关如何从子项更新父项的问题，请参见以下内容

有两种方法可以在父组件中设置数据，一种是从api重新蚀刻，或者从子组件传递到父组件并更新其中的状态

我这里有一个例子，如何更新父级和子级，向列表中添加名称，在父级组件中维护名称列表状态，子级将通过添加名称将值传递回父级

import { useState } from "react";
import Child from "./Child";

export default function Parent() {
  const [list, setList] = useState(["ram"]);

  const handleAddName = (name) => {
    if (name) {
      setList([name, ...list]);
  // or you can refetch the list from api here

    }
  };
  return (
    <div>
      <div style={{ float: "left" }}>
        <h1>I am a parent Component</h1>
        <ul>
          {list &&
            list.map((item) => {
              return <li key={item}>{item}</li>;
            })}
        </ul>
      </div>

      <Child handleSubmit={handleAddName} />
    </div>
  );
}

从“react”导入{useState}；
从“/Child”导入子项；
导出默认函数父函数（）{
const[list，setList]=useState（[“ram”]）；
const handleAddName=（名称）=>{
如果（姓名）{
集合列表（[名称，…列表]）；
//或者，您也可以在此处从api中重新提取列表
}
};
返回(
我是一名家长

{列表&&
list.map（（项目）=>{
返回
{item}
；
})}

);
}

孩子

从“react”导入{useState}；
导出默认函数子项（道具）{
const[name，setName]=useState（“”）；
常量updateNameList=（名称）=>{
如果（姓名）{
道具。手持提交（名称）；
//发送数据后重置字段
//您还可以在此处保存数据，以生成post请求各自的api
集合名（“”）；
}
};
返回(
我是一个孩子
在下面添加名称



setName（e.target.value）}/>
updateNameList（名称）}>Add
);
}

请参阅此代码和方框

---

---

您可以使用回调将数据从子组件发送到父组件，您熟悉吗？共享一个片段，以及如何呈现状态值？好的，我将共享一个代码沙盒非常感谢sirI添加了此示例，请参考。您可以使用回调将数据从子组件发送到父组件，你熟悉它吗？分享一个片段，我如何呈现状态值？好的，我将分享一个代码沙盒非常感谢sirI添加了这个示例，请参考它谢谢我看到了它。我现在的问题是如何映射我的状态以返回组件列表。它似乎是嵌套的。请看一看问题中的图片，您想实现什么，是否希望我向您展示如何构建组件，以便您可以向其传递数据并显示嵌套数据？这可能是调用，但我真正需要的是在我的useState列表中显示api调用中的项。map函数只返回一个值，可能是因为我没有正确设置状态，或者没有很好地映射状态。我有一个状态的快照附在问题的图片上。明白了。你能添加你的CastItem组件吗？它看起来怎么样？看我的错误。阅读过多博客，睡眠不足。非常感谢Goutham先生谢谢我看到了。我现在的问题是如何映射我的状态以返回组件列表。它似乎是嵌套的。请看一看问题中的图片，您想实现什么，是否希望我向您展示如何构建组件，以便您可以向其传递数据并显示嵌套数据？这可能是调用，但我真正需要的是在我的useState列表中显示api调用中的项。map函数只返回一个值，可能是因为我没有正确设置状态，或者没有很好地映射状态。我有一张附在问题上的图像中的状态快照，你能添加你的CastItem组件h吗