Reactjs React.js：将值从state直接分配给TextField

我有一个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);
});

它在ViewOutline状态下正确地设置为json，如下所示 例如 {参考文献：“2020091600”，相关参考文献：“2020091601}

现在，我想把这些值直接赋给文本字段

我是这样做的，我不确定在每个领域使用map是否是一个好的实践

<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,
                    }}
                  />

viewOutside.reference）}
onChange={（e）=>setViewOutward（e.target.value）}
输入道具={{
类：{input:classes.textfield1}，
}}
输入道具={{
最大长度：16，
}}
/>

它正在工作，但它可能会对性能造成影响

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

假设API响应： 在TextField中使用状态

viewOutside.map（（项目，索引）=>
//一旦更改文本，将新值指定给同一对象
设置视图向外（vo=>
vo.map（row=>row.reference===item.reference
？{…行，引用：e.target.value//任何可以更新的属性
}：行）
)
}
InputProps={{
类：{input:classes.textfield1}，
}}
inputProps={{
最大长度：16，
}}
/>
)

假设API响应： 在TextField中使用状态

viewOutside.map（（项目，索引）=>
//一旦更改文本，将新值指定给同一对象
设置视图向外（vo=>
vo.map（row=>row.reference===item.reference
？{…行，引用：e.target.value//任何可以更新的属性
}：行）
)
}
InputProps={{
类：{input:classes.textfield1}，
}}
inputProps={{
最大长度：16，
}}
/>
)

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

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,
      }}
  />
)