渲染选定的 <select> 选项并以 React 钩子形式注册输入值

问题描述

试图在我的结果中呈现控制器组件“选项”。 我的选项在表单字段中显示为 [object Object]。如何显示下拉选择选项的结果？

Step1.js const schema = yup.object().shape({ 名字：是的 。细绳（） .matches(/^([^0-9])$/,"名字不能包含数字") .required("名字是必填字段"),姓氏：是的 。细绳（） .matches(/^([^0-9])$/,"姓氏不能包含数字") .required("姓氏为必填字段"),});

export const Step1 = () => {
  const { setValues,data } = useData();
  const history = useHistory();
  const { register,handleSubmit,errors,control } = useForm({
    defaultValues: { firstName: data.firstName,lastName: data.lastName },mode: "onBlur",resolver: yupResolver(schema),});

  const onSubmit = (data) => {
    history.push("./step2");
    setValues(data);
  };

  return (
    <MainContainer>
      <Typography component="h2" variant="h5">
        ? Step 1
      </Typography>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Input
          ref={register}
          id="firstName"
          type="text"
          label="First Name"
          name="firstName"
          error={!!errors.firstName}
          helperText={errors?.firstName?.message}
        />
        <Input
          ref={register}
          id="lastName"
          type="text"
          label="Last Name"
          name="lastName"
          error={!!errors.lastName}
          helperText={errors?.lastName?.message}
        />
        <Input
          ref={register}
          id="artistName"
          type="text"
          label="Artist Name"
          name="artistName"
          error={!!errors.artistName}
          helperText={errors?.artistName?.message}
        />
        {/* <Select options={options} ref={register} /> */}
        <Input
          ref={register}
          id="songTitle"
          type="text"
          label="Song Title"
          name="songTitle"
          error={!!errors.songTitle}
          helperText={errors?.songTitle?.message}
        />
        <Input
          ref={register}
          id="label"
          type="text"
          label="Record Label Name"
          name="label"
        />
        <h3>Music Genre</h3>
        <Controller
          name="MusicGenre"
          control={control}
          options={[
            { value: "chocolate",label: "Chocolate" },{ value: "strawBerry",label: "StrawBerry" },{ value: "vanilla",label: "Vanilla" },]}
          as={Select}
        />
        <h3>Music Service</h3>
        Publishing
        <Controller
          name="Publishing"
          control={control}
          defaultValue={false}
          rules={{ required: true }}
          render={(props) => (
            <CheckBox
              onChange={(e) => props.onChange(e.target.checked)}
              checked={props.value}
            />
          )} // props contains: onChange,onBlur and value
        />
        distribution
        <Controller
          name="distribution"
          control={control}
          defaultValue={false}
          rules={{ required: true }}
          render={(props) => (
            <CheckBox
              onChange={(e) => props.onChange(e.target.checked)}
              checked={props.value}
            />
          )} // props contains: onChange,onBlur and value
        />
        Licensing
        <Controller
          name="Licensing"
          control={control}
          defaultValue={false}
          rules={{ required: true }}
          render={(props) => (
            <CheckBox
              onChange={(e) => props.onChange(e.target.checked)}
              checked={props.value}
            />
          )} // props contains: onChange,onBlur and value
        />
        <br></br>
        Music Label Services
        <Controller
          name="MusicLabelServices"
          control={control}
          defaultValue={false}
          rules={{ required: true }}
          render={(props) => (
            <CheckBox
              onChange={(e) => props.onChange(e.target.checked)}
              checked={props.value}
            />
          )} // props contains: onChange,onBlur and value
        />
        <br />
        Other
        <Controller
          as={TextField}
          name="Other"
          control={control}
          defaultValue=""
        />
        <PrimaryButton>Next</PrimaryButton>
      </Form>
    </MainContainer>
  );
};

FileInput.js

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: "#eee",textAlign: "center",cursor: "pointer",color: "#333",padding: "10px",marginTop: "20px",},icon: {
    marginTop: "16px",color: "#888888",fontSize: "42px",}));

export const FileInput = ({ control,name }) => {
  const styles = useStyles();

  return (
    <Controller
      control={control}
      name={name}
      defaultValue={[]}
      render={({ onChange,onBlur,value }) => (
        <>
          <Dropzone onDrop={onChange}>
            {({ getRootProps,getInputProps }) => (
              <Paper
                variant="outlined"
                className={styles.root}
                {...getRootProps()}
              >
                <CloudUpload className={styles.icon} />
                <input {...getInputProps()} name={name} onBlur={onBlur} />
                <p>Drag 'n' drop files here,or click to select files</p>
              </Paper>
            )}
          </Dropzone>
          <List>
            {value.map((f,index) => (
              <ListItem key={index}>
                <ListItemIcon>
                  <InsertDriveFile />
                </ListItemIcon>
                <ListItemText primary={f.name} secondary={f.size} />
              </ListItem>
            ))}
          </List>
        </>
      )}
    />
  );
};

结果.js

const useStyles = makeStyles({
  root: {
    marginBottom: "30px",table: {
    marginBottom: "30px",});

export const Result = () => {
  const [success,setSuccess] = useState(false);
  const styles = useStyles();
  const { data } = useData();

  const entries = Object.entries(data).filter((entry) => entry[0] !== "files");
  const { files } = data;

  const onSubmit = async () => {
    const formData = new FormData();
    if (data.files) {
      data.files.forEach((file) => {
        formData.append("files",file,file.name);
      });
    }

    entries.forEach((entry) => {
      formData.append(entry[0],entry[1]);
    });

    const res = await fetch("http://localhost:4000/",{
      method: "POST",body: formData,});

    if (res.status === 200) {
      Swal.fire("Great job!","You've passed the challenge!","success");
      setSuccess(true);
    }
  };


  return (
    <>
      <MainContainer>
        <Typography component="h2" variant="h5">
          ? Form Values
        </Typography>
        <TableContainer className={styles.root} component={Paper}>
          <Table className={styles.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Field</TableCell>
                <TableCell align="right">Value</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {entries.map((entry) => (
                <TableRow key={entry[0]}>
                  <TableCell component="th" scope="row">
                    {entry[0]}
                  </TableCell>
                  <TableCell align="right">{entry[1].toString()}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        {files && (
          <>
            <Typography component="h2" variant="h5">
              ? Files
            </Typography>
            <List>
              {files.map((f,index) => (
                <ListItem key={index}>
                  <ListItemIcon>
                    <InsertDriveFile />
                  </ListItemIcon>
                  <ListItemText primary={f.name} secondary={f.size} />
                </ListItem>
              ))}
            </List>
          </>
        )}
        <PrimaryButton onClick={onSubmit}>Submit</PrimaryButton>
        <Link to="/">Start over</Link>
      </MainContainer>
    </>
  );
};

解决方法

我认为您的数据是字符串化的。尝试对您的数据使用 JSON.parse。