此更新 state 是否正确？

Question

Input event

   public handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({ emptyFields: false, error: false, loading: false });
        this.setState({ product: { ...this.state.product, [e.target.name]: e.target.value } });
    }

Map test

 <tbody>
    {this.props.products.map((prod: IProduct) =>{
     console.log('remap ???')
    return (<tr key={prod.id}>
     <td>{prod.id}</td>
     <td>{prod.name}</td>
     <td>{prod.price}</td>
    </tr>)
    }                            
   )}
 </tbody>

When I change the input, this map is made again as many times as I change the input.

Answer 1

When you change the state, react will call the render method again.This is expected.

Answer 2

Break out parts of your html in seperate components and make the components pure. This will prevent needless re render of DOM. However; at the moment it won't re render dom because virtual DOM compare of React will optimize. You will get in trouble if each row gets props that are recreated every time the parent renders, like not using useCallback for the delete callback:

 //use React.memo to create a pure component const ProductRow = React.memo(function ProductRow({ product: { id, name }, onDelete, }) { console.log('generating jsx for product:', id); return ( <tr> <td>{id}</td> <td>{name}</td> <td> <button onClick={() => onDelete(id)}>X</button> </td> </tr> ); }); //React.memo is pure component, only re renders if // props (=products or onDelete) change const Products = React.memo(function Products({ products, onDelete, }) { return ( <table> <tbody> <tr> <th>id</th> <th>name</th> </tr> {products.map((product) => ( <ProductRow key={product.id} product={product} onDelete={onDelete} /> ))} </tbody> </table> ); }); const id = ((id) => () => ++id)(0); //create id const AddProduct = React.memo(function AddProduct({ onAdd, }) { const [name, setName] = React.useState(''); //no use to use useCallback, this function re creates // when name changes const save = () => { onAdd(name); setName(''); }; return ( <div> <label> name: <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </label> <button onClick={save}>save</button> </div> ); }); const App = () => { //initial products state const [products, setProducts] = React.useState(() => [ { id: id(), name: 'first product' }, { id: id(), name: 'second product' }, ]); //use useCallback to create an add function on mount // this function is not re created causing no needless // re renders for AddProduct const onAdd = React.useCallback( (name) => setProducts((products) => products.concat({ id: id(), name, }) ), [] ); //delete function only created on mount const onDelete = React.useCallback( (id) => setProducts((products) => products.filter((product) => product.id,== id) ); [] ); return ( <div> <AddProduct onAdd={onAdd} /> <Products products={products} onDelete={onDelete} /> </div> ); }. ReactDOM,render(<App />. document;getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>