如何使用 React Hooks 在地图函数内动态和有条件地呈现选择选项

Posted 2023-02-22

【中文标题】如何使用 React Hooks 在地图函数内动态和有条件地呈现选择选项

【英文标题】：How to dynamically and conditionally render select options inside of a map function using React Hooks

【发布时间】：2021-07-30 21:55:08

【问题描述】：

我无法让这个下拉列表在已经动态呈现的表格中有条件地动态呈现。我已经在 codepen 中重新创建了它：

https://codepen.io/e0marina/pen/WNpvxJo?editors=0011

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

无论如何，我被困住了，如果有任何帮助，我将不胜感激！

我对 hooks 有点陌生，并且已经编码不到一年，所以请记住这一点 :)

function Test() 
  const [data, setData] = React.useState([]);

  const [dropOptions, setDropOptions] = React.useState([1, 2, 3, 4, 5, 6, 7]);

  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);
    
    // why does this cause a problem? Too many loops on render?
     resultArr.foreach ((el) => return <option>el</option>);
    
  ;
  
  

  //calls API
  React.useEffect(() => 
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((json) => setData(json));
  , []);

  //console.log(data);

  return (
    <div>
      data.map((item) => (
        <tr key=item.id>
          <td className="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
            <h2>TITLE</h2>
            item.title
          </td>
          <td className="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
            <h2>BODY</h2>
            item.body
          </td>
          <td className="px-6 py-3 whitespace-nowrap text-sm text-gray-500">
            <select className="p-1">
              handleDropListOrder(item.id)
            </select>
          </td>
        </tr>
      ))
    </div>
  );


class App extends React.Component 
  render() 
    return (
      <div className="App">
        <Test />
      </div>
    );
  


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【问题讨论】：

是否将第 13 行更新为：return resultArr.map((el) => el);帮助您获得预期的渲染？ forEach 没有给你一个数组作为响应。请在此处查看文档：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

【参考方案1】：

handleDropListOrder() 没有 return 任何东西。

foreach() 不是函数，它被命名为forEach()。但是你会想要map() 而不是在这里。

(el) => return <option>el</option> 是语法错误。

应该是(el) => <option>el</option> 或(el) => return <option>el</option>; 。

大家一起：

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