反应发送道具问题

Question

I am using React Kendo grid like this:

      <Grid sortable={true}
            filterable={true}
            onDataStateChange={onDataStateChange}
            groupable={true}
            reorderable={true}
            pageable={true}
            data={result}
            {...dataState}>
            <GridColumn cell={CommandCell} title="Options"/>
            <GridColumn field="session_id" title="Session" filter='text'/>
            <GridColumn field="sn_zag_id" title="Service" filter='text'/>
      </Grid>

The CommandCell looks like this:

const CommandCell = (props) => <MyCommandCell {...props}/>;

const MyCommandCell = (props) => {
      return <td className="k-command-cell">
        <div style={{marginTop:'2%'}}>
         <Button style={{width:'8vw',marginTop:'2%'}}
          onClick={()=> alert(props)}>
           <FcCancel/>Alert
          </Button>
          <Button style={{width:'8vw',marginTop:'2%'}}
          onClick={()=>toggleDialogPrilog()}>
           <AiFillFileAdd/> Add file
          </Button></>}
          </div> 
          { visible &&<Dialog onClose={toggleDialogPrilog} title={"Add file"}>
          <Prilog props={props}/>
          </Dialog>}
        </td>;
    };

So, my intention is, when I click on the Button 'Add' in the grid, I want the dialog to open and I want to send props to the 'Prilog' component. Prilog component looks like this:

export default  function Prilog ({props}) {
  
    console.log(props);
    const [file, setFile] = useState();
 const handleSubmit = async(event) =>{
        console.log(event);
        event.preventDefault()
        let resp = await services.uploadSnPrilog(0,props,file.name,file.opis,file.base64);
        console.log(resp);
    
      }

 const handleSubmit = async(event) =>{
        console.log("Hello");
        ...some logic...
      }

return <>
    <DialogActionsBar>
        <div>
<p>{props.dataItem.sn_zag_id}</p>
            <form  onSubmit={handleSubmit}>
                <button className='appBar-containers'  type="submit">
                <FaUpload/> Add
                </button>
                <input type="file" style={{marginTop:'1vh', marginLeft:'1vw'}}></input>
            </form>
        </div>
    </DialogActionsBar>
    </>

}

But the thing is, when I click 'Add' on any row in the grid, the console.log in Prilog component logs all the props, from all visible rows, and not the row that I clicked. Also, the

{props.dataItem.sn_zag_id}

writes always the first written 'sn_zag_id' from the first prop that was console logged. On the other hand, if I click 'Alert', it console logs the props from only that row. How can I send only the props of the clicked row to the Prilog component and not all props?

Answer 1

The console.log in the body of the component is showed every time the component re-renders, which happens every time a Parent component re-renders, so it's pretty likely that your handleSubmit triggers a re-render up in the tree, could be a global store dispatch or so. If you don't want the Prilog that don't change their props to re-render you have to wrap them into React.memo() .