从 useState Hook React 渲染项目

Question

我已经使用 useEffect 调用了我的 api 并使用 useState 挂钩存储了项目数组，但我发现很难将这些项目呈现为自定义也将传递数据的组件。

这是我的反应片段：

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]][1]

如何将此状态映射为组件列表？我对此感到困惑

如您所见，我正在使用对话框创建新项目并在请求成功后关闭对话框。我在这里有一个疑问，我如何告诉托管对话框的主要组件新数据已经被获取并且应该添加到状态中？

我的主要问题是如何将状态中的项目映射到 return <CastItem /> 组件的列表

CastItem 组件片段

export default function CastItem(props) {

let {bibleCast} = props;

const classes = useStyles();

return <GridContainer>
    <GridItem xs={12} sm={6} md={4}>
        <Card>
            <CardHeader color="info" stats icon>
                <CardIcon color="info">
                    <Streams />
                </CardIcon>
            </CardHeader>

            <CardBody>
                <h3 className={classes.cardTitle}>{bibleCast.title}</h3>
                <p className={classes.cardCategory}> Reinhard Bonnke</p>
            </CardBody>
        </Card>
    </GridItem>
</GridContainer>
}

CastItem.propTypes = {
  bibleCast: PropTypes.object.isRequired,
}

JSON 来自 API 在控制台中的响应：

[![json response][2]][2]

如果您要创建一个状态变量来将此响应表示为列表并显示该列表，您将如何使用挂钩来实现它。谢谢你。 [1]: https://i.stack.imgur.com/QkthN.png [2]: https://i.stack.imgur.com/8Hf11.png

Answer 1

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

这样做

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

对于 Maping 这样做


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

// 有关如何从 child 更新 parent 的问题，请遵循以下

有两种方法可以在 parent 组件中设置数据，一种是从 api 重新获取或从 children 传递到 parent 并更新在那里声明

我这里有一个示例如何更新 parent 和 children，将名称添加到列表中，名称列表状态在 parent 组件中维护 [=35] =] 将通过添加 name

将值传回给 parent

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>
  );
}

Child


import { useState } from "react";

export default function Child(props) {
  const [name, setName] = useState("");

  const updateNameList = (name) => {
    if (name) {
      props.handleSubmit(name);
      //reset field after data is sent
      // you can also save data here making post request respective api
      setName("");

    }
  };

  return (
    <div style={{ float: "right" }}>
      <h1>I am a Child Component</h1>
      <p> Add names below</p>
      <br />
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => updateNameList(name)}>Add</button>
    </div>
  );
}

参考这个代码和框

从 useState Hook React 渲染项目

Render Items from useState Hook React

state

reactjs

use-state