Javascript 如何使用React钩子动态和有条件地渲染map函数内的select选项

我很难在已经动态呈现的表中有条件地动态呈现这个下拉列表。我已在代码笔中重新创建了它：

我尝试了很多方法，包括将函数内联，这导致列表中的项目太多。然后，我尝试清除每个循环顶部的列表，但没有在每个下拉列表中放入足够的项目。在Resultar上尝试了useState中的setDropOptions，结果变成了无限循环

不管怎么说，我被困住了，如果能得到任何帮助，我将不胜感激

我对hooks有点陌生，并且已经编写代码不到一年了，所以请记住：）

功能测试（）{
const[data，setData]=React.useState（[]）；
const[dropOptions，setDropOptions]=React.useState（[1,2,3,4,5,6,7]）；
常量handleDropListOrder=（传入）=>{
//在render func的item.id中，从下面的数组中取出现有（传入）选项
让resultArr=dropOptions.filter（（option）=>option！=传入）；
//将现有的一个放在数组中的0位置
结果取消移位（传入）；
//为什么这会导致问题？渲染上的循环太多？
resultArr.foreach（（el）=>return{el}）；
};
//调用API
React.useffect（（）=>{
取回（“https://jsonplaceholder.typicode.com/posts")
.then（（response）=>response.json（））
。然后（（json）=>setData（json））；
}, []);
//控制台日志（数据）；
返回(
{data.map（（项）=>(
标题
{item.title}
身体
{item.body}
{handleDropListOrder（item.id）}
))}
);
}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

• handleDropListOrder（）

  不返回任何内容

• foreach（）

  不是函数，而是命名的。但是你会想要在这里

• （el）=>返回{el}

  是一个语法错误
  它应该是

  （el）=>{el}

  或

  （el）=>{return{el}；}

总而言之：

const handleDropListOrder = (incoming) => {
  //take existing (incoming) option out of the array from below in render func, item.id
  let resultArr = dropOptions.filter((option) => option != incoming);
  //put the existing one at the 0 position in array
  resultArr.unshift(incoming);

  return resultArr.map((el) => <option>{el}</option>);
};

const handleDropListOrder=（传入）=>{
//在render func的item.id中，从下面的数组中取出现有（传入）选项
让resultArr=dropOptions.filter（（option）=>option！=传入）；
//将现有的一个放在数组中的0位置
结果取消移位（传入）；
返回resultArr.map（（el）=>{el}）；
};

将第13行更新为：返回resultArr.map（（el）=>{el}）；帮助您获得预期的渲染效果？forEach不会给您一个数组作为响应。请在此处查看文档：

const handleDropListOrder = (incoming) => {
  //take existing (incoming) option out of the array from below in render func, item.id
  let resultArr = dropOptions.filter((option) => option != incoming);
  //put the existing one at the 0 position in array
  resultArr.unshift(incoming);

  return resultArr.map((el) => <option>{el}</option>);
};