React子组件ResponseModal无法接收父组件传递的props参数问题

核心问题梳理 #

• props接收方式错误：React函数组件只会接收一个props对象作为第一个参数，你现有写法const ResponseModal = (flag, data) =>中，第一个参数flag是包含了open和data的整体props对象，第二个参数data是React预留的ref参数，并非你传递的data属性，所以读取到的值为空。
• 违反单向数据流规则：子组件内部单独维护open状态，还直接修改传入的flag.open属性，属于直接修改props的错误操作，会导致状态不同步。
• useEffect缺少依赖：父组件中监听data变化的useEffect没有配置依赖数组，会在每次组件渲染时重复触发，导致接口重复调用。
• 属性名写法错误：React中DOM元素的类名属性需要用className，不能用原生HTML的class，否则样式不会生效。

修正后的代码 #

QrScanner.js 修正点：给useEffect加依赖，新增关闭模态框的方法传递给子组件 #

import { useHistory } from "react-router-dom";
import BarcodeScannerComponent from "react-qr-barcode-scanner";
import React, { useEffect, useState} from "react";
import axios from 'axios';
import ResponseModal from './ResponseModal';

const QrScanner = () => {
  const [data, setData ] = useState('');
  const [flag, setFlag] = useState(false);
  const history = useHistory();

  // 新增关闭模态框方法，传递给子组件调用
  const handleCloseModal = () => {
    setFlag(false);
    // 可按需重置data值：setData('')
  }

  // 加依赖数组，只有data变化时才执行
  useEffect(() => {
    if(data === '') {
      return;
    }
    if (Number.isInteger(parseInt(data))) {
      axios.get('/some/endpoint/code/' + data)
      .then(res => {
        if (res.data != false) { 
          setFlag(true);
        } else{
          setData('Sorry, Wrong barcode!');
        }
      })
    }
  }, [data])

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) {
            setData(result.text);
          }
        }}
      />
      <p className="modal-result-show">{data}</p>
      {/* 传递关闭方法给子组件 */}
      <ResponseModal open={flag} data={data} onClose={handleCloseModal}/>
    </>
  );
}

export default QrScanner

ResponseModal.js 修正点：正确接收props，删除冗余的open状态 #

import 'react-responsive-modal/styles.css';
import Modal from 'react-responsive-modal';
import React from "react";

// 解构props获取传入的属性
const ResponseModal = ({open, data, onClose}) => {
  return (
    <>
      <Modal open={open} onClose={onClose}>
        <div className="qr-modal-header-stock">
          <h5>Enter fulfillment stock</h5>
          <form action="/some/another/endpoint/save" method="POST">  
              <input type="hidden" name="ean" value={data} />
              <input type="number" name="product_stock" className="form-control"/> <br />
              <input type="submit" className="btn btn-primary form-control"/>
          </form>
        </div>
      </Modal>
    </> 
  );
}

export default ResponseModal

内容的提问来源于stack exchange，提问作者Áron Pop Adorján