在遍历对象并更新表单后，切换图标。

Question

我有一个带有社会对象的表单，我想将一个图标添加到具有布尔值的社会通知中，还想切换图标并更新表单。

      export default function UserProfile(props) {
              
          const form = useForm({
            initialValues: {
              name: props.userProfile.name,
              socials: {
                email: {        
                  notifications: true,
                },
               facebook: {
                  notifications:  false,
                },
               twitter: {
                  notifications:  false,
                },
              },
            },
         });
    
    return (

    <> 
             <form
                method="post"
                className="pt-5"
                key={props.userProfile.id}
                onSubmit={form.onSubmit(handleSubmit)}
              >
                    <TextInput
                      label="Name"
                      placeholder={props.userProfile.name}
                      {...form.getInputProps("name")}
                    />
                <Tabledata
                  socials={{ ...form.getInputProps("socials") }}
                  session={session}
                />
          <button type="submit">Save</button>
       </form>
     </>
    )             
 }

表数据组件是：

function Tabledata({ socials }) {
  // console.log(socials.value["email"]["notifications"]);
  function ToggleButton() {
 const [isChecked, setIsChecked] = useState(true);

return isChecked? <CheckCircleIcon
                     className="h-6 w-6 text-green-500"
                     onClick={() => setIsChecked(!isChecked)}
                  /> 
                : <XCircleIcon
                      className="h-6 w-6 text-red-500"
                      onClick={() => setIsChecked(!isChecked)}
                   />
}

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {socials.value[data]["notifications"]? (
                  <ToggleButton />
                ) : (
                 "Null"
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

但我无法切换通知的值。我怎么才能接近那个？我尝试了上面的方法，也尝试了下面的方法，但是没有得到想要的结果。我不知道该怎么做。

function Tabledata({ socials }) {
          return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {socials.value[data]["notifications"]? (
                  <CheckCircleIcon
                    className="h-6 w-6 text-green-500"
                     onClick={() =>
                      console.log(`change the notification to false`)
                    }
                  />
                ) : (
                  <XCircleIcon
                    className="h-6 w-6 text-red-500"
                    onClick={() =>
                      console.log(`change the notification to true`)
                    }
                  />
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

请留下你的建议。我尝试了不同的StackOverflow建议，但无法解决我的问题。

Answer 1

我重构了您的代码，我认为您正在正确的轨道上，您的错误是您正在创建一个函数toggleButton，并且您像一个组件<toggleButton />一样调用这个函数，我刚刚更新了您的代码。希望它能起作用。

function Tabledata({ socials }) {
  // console.log(socials.value["email"]["notifications"]);
  const [isChecked, setIsChecked] = useState(true);
  
  function toggleButton() {
    return isChecked ? (
      <CheckCircleIcon
        className="h-6 w-6 text-green-500"
        onClick={() => setIsChecked(false)}
      />
    ) : (
      <XCircleIcon
        className="h-6 w-6 text-red-500"
        onClick={() => setIsChecked(true)}
      />
    );
  }

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {communications.value[data]["notifications"] ? (
                  <>{toggleButton()}</>
                ) : (
                  "Null"
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

如果您想要制作组件，那么您必须在toggleButton之外制作TableData功能，如下面的代码所示。

function ToggleButton() {
  const [isChecked, setIsChecked] = useState(true);
  return isChecked ? (
    <CheckCircleIcon
      className="h-6 w-6 text-green-500"
      onClick={() => setIsChecked(!isChecked)}
    />
  ) : (
    <XCircleIcon
      className="h-6 w-6 text-red-500"
      onClick={() => setIsChecked(!isChecked)}
    />
  );
}


function Tabledata({ socials }) {
  // console.log(socials.value["email"]["notifications"]);

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {communications.value[data]["notifications"] ? (
                  <ToggleButton />
                ) : (
                  "Null"
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}