如何使用 React Hooks 在 map function 内动态和有条件地渲染 select 选项

Question

I'm having trouble getting this dropdown to conditionally and dynamically render inside of already dynamically rendered table. I have recreated it in a codepen:

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

I've tried many things including putting the function inline, it caused too many items in the list. Then I tried clearing the list at the top of each loop, but it wasn't putting enough items in each drop down. Have tried setDropOptions in useState on the resultArr, that turned into infinite loops.

Anyway, I'm stuck and would appreciate any help!

I'm somewhat new to hooks and have been coding for less than a year, so bear that in mind:)

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() doesn't return anything.

• foreach() isn't a function, it's named forEach() . But you'll want map() instead here.

• (el) => return <option>{el}</option> is a syntax error.

  It should either be (el) => <option>{el}</option> or (el) => { return <option>{el}</option>; } (el) => { return <option>{el}</option>; } .

All together:

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