从 React JS 中的另一个函数访问对象

Question

你好，我正在尝试访问箭头函数中的一个变量，但它不起作用

export const SAMPLEPARTNUMBER = () => {
  const classes = useStyles();
  const { data, isFetching } = useGetThicknessQuery();
  const [selectedPartNo, setSelectedPartNo] = useState();
  var partNoObj = {};
  if (!isFetching) {
    const body = data.body;
    const row1 = data.body.row_1;
    const partNo = data.body.part_no;
    partNoObj = partNo;

    return (
      <div>
        <FormControl fullWidth className={classes.part_no}>
          <InputLabel id="demo-simple-select-label">Part No</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={selectedPartNo}
            label="Part No"
            onChange={(e) => handleChange(e)}
          >
            {Object.keys(partNo).map((val) => (
              <option key={val + Math.random()} value={val}>
                {val}
              </option>
            ))}
          </Select>
        </FormControl>

      </div>
    );
  } else {
    return <div>Loading...!</div>;
  }
//Arrow function 

  const handleChange = (e) => {
    console.log("drop down selected index", e.target.value);
    setSelectedPartNo(e.target.value);
    console.log("part no_1", partNoObj);
  };
};

在 handleChange 箭头函数中，我正在尝试打印 partNoObj，但这不起作用。

Answer 1

您可以通过创建一个新状态来做到这一点。您不能直接在组件内创建变量，因为每当组件重新渲染时，它都会重置变量。


export const SAMPLEPARTNUMBER = () => {
  const classes = useStyles();
  const { data, isFetching } = useGetThicknessQuery();
  const [selectedPartNo, setSelectedPartNo] = useState();
  const [Response, setResponse] = useState();

  useEffect(()=> {
    setResponse(data);
  }, [data]);

  //Arrow function 
  const handleChange = (e) => {
    console.log("drop down selected index", e.target.value);
    setSelectedPartNo(e.target.value);
    console.log("part no_1", Response.body.part_no);
  };

    return (
     <>{!isFetching ?
       <div>
        <FormControl fullWidth className={classes.part_no}>
          <InputLabel id="demo-simple-select-label">Part No</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={selectedPartNo}
            label="Part No"
            onChange={(e) => handleChange(e)}
          >
            {Object.keys(partNo).map((val) => (
              <option key={val + Math.random()} value={val}>
                {val}
              </option>
            ))}
          </Select>
        </FormControl>
       </div> : <div>Loading...!</div>}</>
    );

};

从 React JS 中的另一个函数访问对象

access an object from another function in React JS

jsx

reactjs