在for loop react js中进行单独的条件呈现。

Question

const [isAgent, setAgent] = useState(true);

  {isSupervisor.map((value, index) => {

  return <div className="text-gray-700 rounded-lg" key={index}>
    {isAgent ? <div className="flex flex-row">
        <div className=" flex-none text-center">
            <div>Halo</div>
        </div>
        <div className="flex-grow text-gray-700 px-2 py-1 my-auto">
           <button onClick={() => setAgent(true)} className="bg-custom-14 ">Edit</button>
        </div> 
      </div>
    </div>
   </div> : <div>
     <div className="flex flex-col my-2 mx-8">
        <div className=" flex-none text-center">
            <div>Halo</div>
        </div>
          <div className="flex justify-end">
              <button onClick={() => setAgent(false)} className="bg-custom-14">Discard</button>
          </div>
   </div> </div>

问题:当我点击一个条件按钮时，所有的按钮都遵循这个条件，有没有办法让每个按钮都有一个单独的条件？谢谢

Answer 1

我写这个答案的假设是，在这个带有按钮的部分列表中，您只需要在单击“编辑”时更改一个部分。由于isAgent和setAgent同时影响所有节，因此您的状态应该有每个节的状态映射，isAgent应该是通过节关键字从此状态检索balue的函数，setAgent应该接受节关键字。因此，您的react状态可能如下所示：

class State {
  editingAgents = {};
  isAgent = (index) => editingAgents[index];
  setAgents = (index, isAgent) => editingAgents[index] = isAgent;
}

修改后的组件代码可能如下所示(注意isAgent和setAgent现在是如何使用的)

const [isAgent, setAgent] = useState(true);

  {isSupervisor.map((value, index) => {

  return <div className="text-gray-700 hover:bg-custom-8 rounded-lg" key={index}>
    {isAgent(index) ? <div className="flex flex-row">
        <div className=" flex-none text-center mx-2 my-1">
            <img src={Ane} className=" w-54px lg:w-50px object-contain"></img>
        </div>
        <div className="flex-grow text-gray-700 px-2 py-1 my-auto">
           <button onClick={() => setAgent(index, true)} className="bg-custom-14 ">Edit</button>
        </div> 
      </div>
    </div>
   </div> : <form onSubmit={handleSubmit(updateAgent)}>
     <div className="flex flex-col my-2 mx-8">
        <div className="m-2 lg:mt-4 hidden">
            <div className="inline-block w-3/12 text-base lg:text-sm font-semibold">Id</div>
        </div>
          <div className="flex justify-end">
              <button onClick={() => setAgent(index, false)} className="bg-custom-14">Discard</button>
          </div>
   </div> </form>