反应发送道具问题

Question

我正在像这样使用 React Kendo 网格：

      <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>

命令单元看起来像这样：

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>;
    };

所以，我的意图是，当我单击网格中的“添加”按钮时，我希望打开对话框并将道具发送到“Prilog”组件。 Prilog 组件如下所示：

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

}

但问题是，当我在网格中的任何行上单击“添加”时，Prilog 组件中的 console.log 会记录所有可见行的所有道具，而不是我单击的行。 此外，

{props.dataItem.sn_zag_id}

始终写入控制台记录的第一个道具中的第一个写入的“sn_zag_id”。 另一方面，如果我单击“警报”，它的控制台将仅记录该行的道具。 如何只将点击行的道具发送到 Prilog 组件而不是所有道具？

Answer 1

每次组件重新渲染时都会显示组件主体中的console.log ，这在每次父组件重新渲染时都会发生，因此您的handleSubmit很可能会触发树中的重新渲染，可能是全球商店派送左右。 如果您不希望不更改道具的Prilog重新渲染，您必须将它们包装到React.memo()中。