How to validate dynamic field data on the react client-side and node server-side?

问题

I have created dynamic input field in the React component, but don't know how to validate this dynamic field data on the client-side when onChange and onSubmit event occurred. I usually use joi or yup to validate data, but don't know how I can validate dynamic field data. Here is my code:

import React, { useState } from 'react';
import { v4 as uuidV4 } from 'uuid';
import './styles.css';

const createFieldsObject = (fields) => ({
  id: uuidV4(),
  fields,
});

const DynamicTable = ({ fields }) => {
  const [fieldRows, setFieldRows] = useState([createFieldsObject(fields)]);

  const onChangeHandler = (id) => (e) => {
    const { name, value } = e.target;

    setFieldRows((rows) =>
      rows.map((row) =>
        row.id === id
          ? {
              ...row,
              fields: {
                ...row.fields,
                [name]: value,
              },
            }
          : row
      )
    );
  };

  const addHandler = () =>
    setFieldRows((rows) => [...rows, createFieldsObject(fields)]);

  const deleteHandler = (id) => () =>
    setFieldRows((rows) => rows.filter((row) => row.id !== id));

  const getFieldRows = () => fieldRows.map(({ fields }) => fields);

  const submitHandler = (e) => {
    e.preventDefault();
    console.log(getFieldRows());
  };

  return (
    <form onSubmit={submitHandler}>
      <div>
        <button onClick={addHandler}>Add</button>
      </div>
      <table>
        <tbody>
          {fieldRows.map(({ id, fields }, index) => (
            <tr key={id}>
              {Object.entries(fields).map(([key, value]) => (
                <td key={key}>
                  {key}:
                  <input
                    type='text'
                    name={key}
                    onChange={onChangeHandler(id)}
                    value={value}
                  />
                </td>
              ))}
              <td>
                <button onClick={deleteHandler(id)}>Delete</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div>
        <button type='submit'>Submit</button>
      </div>
      {/* Test input value working correctly */}
      <div>
        {fieldRows.map(({ id, fields }) => (
          <p key={id}>{Object.values(fields).join(' - ')}</p>
        ))}
      </div>
      {/* ---- */}
    </form>
  );
};

export default function App() {
  return (
    <div className='App'>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <DynamicTable fields={{ Name: '', Age: 0 }} />
      <DynamicTable fields={{ Name: '', Age: 42, Location: '', country: '' }} />
    </div>
  );
}

I also don't know how I will validate data on server side.

import express from 'express';
const Joi = require('joi');
const router = express.Router();

router.post('/dynamic_data', async (req, res) => {
  // Don't know how to validate on server-side
});

export default router;

来源：https://stackoverflow.com/questions/65707934/how-to-validate-dynamic-field-data-on-the-react-client-side-and-node-server-side