React钩子中的动态和受控组件

Question

我想动态生成受控的输入组件。

data是一个对象数组，具有以下形式：

data = [{obj1}, {obj2}, ...] // length not fixed

加载data后，它将触发useMemo和useEffect，如下所示：

const [row, setRow] = useState([]);

const onContentChange = e => {
  const currentRow = [...row]
  currentRow[e.target.dataset.idx][e.target.className] = e.target.value
  setRow(currentRow)
}

useEffect(() => {
  const arr = []
  data.forEach(obj => {
    arr.push({
      content: obj.content
    })
  })
  setRow(arr)
}, [data])

const mData = useMemo(() => {
  const retArr = []
  data.forEach( (obj, i) => {
    retArr.push({
      content: (
        <input
          type="text"
          className="content"
          name={`content-${i}`}
          id={`content-${i}`}
          data-idx={i}
          onChange={onContentChange}
          value={row[i].content} // Error
        />
      )
    })
  })
  return retArr;
}, [data])

但是，row[i]在那时是空的。也许useRow中的useEffect完成后，就会执行factory中的useMemo函数。

由于useEffect处有回调，是否有任何方法可以控制useEffect和useMemo的顺序？

任何其他意见都会受到赞赏！