Question

我有一个要求获取交易详细信息的axios请求

getTransaction(batchRef) {
    return axios.post(`${API_BASE_URL_GET_OUTWARD_TRANSACTION}`, {
      batchRef: batchRef,
    });
  }

我通过这项服务称呼它

const [viewOutward, setViewOutward] = useState([]);

OutwardService.getTransaction(rowData.batchRef).then((response) => {
    setViewOutward(response.data);
});

像这样正确地将其设置为viewOutward状态的json 例如 {reference：“ 2020091600”，相关参考文献：“ 2020091601}

现在，我想直接将这些值分配给文本字段

我正在这样做，我不确定在每个字段上使用地图是否是一种好习惯。

<TextField
                    variant="outlined"
                    margin="normal"
                    required
                    autoComplete="off"
                    fullWidth
                    type="text"
                    id="reference"
                    label="Reference"
                    value={viewOutward.map((viewOutward) => viewOutward.reference)}
                    onChange={(e) => setViewOutward(e.target.value)}
                    InputProps={{
                      classes: { input: classes.textfield1 },
                    }}
                    inputProps={{
                      maxLength: 16,
                    }}
                  />

它正在工作，但是可能会给性能带来损失吗？

有人可以建议仅使用一种状态在文本字段上设置这些值的正确方法。谢谢。

Answer 1

假设API响应：

[{reference: "2020091600", relatedReference: "2020091601"}, {reference: "2020091602", relatedReference: "2020091602"}, ...]

在TextField中使用状态

viewOutward.map((item, index) =>
  <TextField
        variant="outlined"
        margin = "normal"
        required
        autoComplete = "off"
        fullWidth
        type = "text"
        id = `${item.reference}` // if reference is unique
        label = "Reference"
        key = { index } // to identity unique for react 
        value = { item.reference } // assign value
        onChange = {(e) =>  //onchange of text assign new value to same object
                 setViewOutward(vo => 
                  vo.map(row => row.reference === item.reference
                  ? { ...row, reference: e.target.value //whatever property you can update 
                  } : row)
                 )
               }
        InputProps = {{
        classes: { input: classes.textfield1 },
      }}
        inputProps = {{
        maxLength: 16,
      }}
  />
)

Adding Reference for how to update state of an array of object

React.js：将状态值直接分配给TextField

1 个答案:

假设API响应：

在TextField中使用状态