将数组传递给textfield

Question

我从后端得到了这个响应，很明显它是一个对象的集合，

 "deductions": [
            {
                "id": 3,
                "receiptId": 3,
                "type": "loan",
                "amount": 200,
                "reason": "You have took a loan...",
                "createdAt": "2022-02-28T13:16:38.219Z",
                "updatedAt": "2022-02-28T13:16:38.219Z",
                "deletedAt": null
            }
        ]

我在“扣减”数组中包含了三个字段，我使用了"TextField“，如代码所示

但问题是，“演绎”是一个数组，我不知道如何传递它，以便在屏幕上显示它们

<tbody>
              <tr>
                <td>
                  <Controller
                    name="deductions.amount"
                    control={control}
                    render={({ field }) => (
                      <TextField
                        {...field}
                        className="mt-8 mb-16"
                        // error={!!errors.salary.amount}
                        required
                        // helperText={errors?.salary.amount?.message}
                        // label="amount"
                        autoFocus
                        id="deductions.amount"
                        variant="outlined"
                        fullWidth
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">£</InputAdornment>
                          ),
                        }}
                      />
                    )}
                  />
                </td>
                <td>
                  <Controller
                    name="deductions.type"
                    control={control}
                    render={({ field }) => (
                      <TextField
                        {...field}
                        className="mt-8 mb-16"
                        // error={!!errors.salary.bonus}
                        required
                        // helperText={errors?.salary.bonus?.message}
                        // label="Type"
                        autoFocus
                        id="deductions.type"
                        variant="outlined"
                        fullWidth
                      />
                    )}
                  />
                </td>
                <td>
                  <span className="truncate">
                    {" "}
                    <Controller
                      name="deductions.reason"
                      control={control}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          className="mt-8 mb-16"
                          // error={!!errors.salary.workStartDate}
                          required
                          // helperText={errors?.salary.workStartDate?.message}
                          // label="Reason"
                          autoFocus
                          id="deductions.reason"
                          variant="outlined"
                          fullWidth
                        />
                      )}
                    />
                  </span>
                </td>
              </tr>
            </tbody>

我试着用那张地图，但它失败了

我怎样才能解决这个问题？

{order.deductions.map((deduction) => (
                <tr key={deduction.id}>
                  <td>
                    <Controller
                      name="deductions.amount"
                      control={control}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          className="mt-8 mb-16"
                          // error={!!errors.salary.amount}
                          required
                          // helperText={errors?.salary.amount?.message}
                          // label="amount"
                          autoFocus
                          id="deductions.amount"
                          variant="outlined"
                          fullWidth
                          InputProps={{
                            startAdornment: (
                              <InputAdornment position="start">
                                £
                              </InputAdornment>
                            ),
                          }}
                        />
                      )}
                    />
                  </td>
                  <td>
                    <Controller
                      name="deductions.type"
                      control={control}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          className="mt-8 mb-16"
                          // error={!!errors.salary.bonus}
                          required
                          // helperText={errors?.salary.bonus?.message}
                          // label="Type"
                          autoFocus
                          id="deductions.type"
                          variant="outlined"
                          fullWidth
                        />
                      )}
                    />
                  </td>
                  <td>
                    <span className="truncate">
                      {" "}
                      <Controller
                        name="deductions.reason"
                        control={control}
                        render={({ field }) => (
                          <TextField
                            {...field}
                            className="mt-8 mb-16"
                            // error={!!errors.salary.workStartDate}
                            required
                            // helperText={errors?.salary.workStartDate?.message}
                            // label="Reason"
                            autoFocus
                            id="deductions.reason"
                            variant="outlined"
                            fullWidth
                          />
                        )}
                      />
                    </span>
                  </td>
                </tr>
              ))}

Answer 1

我希望您希望将响应数据设置为输入字段，这样您就可以执行如下所示的操作

{order?.deductions.map((deduction, index) => (
                <tr key={deduction.id}>
                  <td>
                    <Controller
                      name={deduction.amount}
                      control={control}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          value={deduction.amount}
                          className="mt-8 mb-16"
                          // error={!!errors.salary.amount}
                          required
                          // helperText={errors?.salary.amount?.message}
                          // label="amount"
                          autoFocus
                          id={deduction.amount}
                          variant="outlined"
                          fullWidth
                          InputProps={{
                            startAdornment: (
                              <InputAdornment position="start">
                                £
                              </InputAdornment>
                            ),
                          }}
                        />
                      )}
                    />
                  </td>
                  <td>
                    <Controller
                      name={deduction.type}
                      control={control}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          value={deduction.type}
                          className="mt-8 mb-16"
                          // error={!!errors.salary.bonus}
                          required
                          // helperText={errors?.salary.bonus?.message}
                          // label="Type"
                          autoFocus
                          id={deduction.type}
                          variant="outlined"
                          fullWidth
                        />
                      )}
                    />
                  </td>
                  <td>
                    <span className="truncate">
                      {" "}
                      <Controller
                        name={deduction.reason}
                        control={control}
                        render={({ field }) => (
                          <TextField
                            {...field}
                            value={deduction.reason}
                            className="mt-8 mb-16"
                            // error={!!errors.salary.workStartDate}
                            required
                            // helperText={errors?.salary.workStartDate?.message}
                            // label="Reason"
                            autoFocus
                            id={deduction.reason}
                            variant="outlined"
                            fullWidth
                          />
                        )}
                      />
                    </span>
                  </td>
                </tr>
              ))}