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

Question

我无法让此下拉菜单有条件地动态呈现在已经动态呈现的内部 table。我已经在代码笔中重新创建了它：

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

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

无论如何，我被卡住了，非常感谢任何帮助！

我对 hook 有点陌生，编码还不到一年，所以请记住这一点 :)


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

Answer 1

handleDropListOrder() 没有 return 任何东西。
foreach() 不是一个函数，它在这里被命名为 forEach(). But you'll want 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>);
};

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

How to dynamically and conditionally render select options inside of a map function using React Hooks

javascript

api

reactjs

react-hooks

use-state