时间戳

首页 > 解决方案 > API 调用后 React 事件处理程序设置为 null

javascript - API 调用后 React 事件处理程序设置为 null

问题描述

我今天面临一个奇怪的问题

我在onChange上调用方法

用户界面：

Data: 
<form onChange={this.handleChangeattribute} >
 <DynamicInputs dynamicAttributes={this.state.dynamicAttributes}/>
</form>

我的动态输入文件：

import React from "react"

const DynamicInputs = (props) => {
  return (
    props.dynamicAttributes.map((val, idx)=> {
      let catId = `title-${idx}`, ageId = `image-${idx}`
      return (
        <div key={idx}>
         <br/>
          <label htmlFor={catId}>{`${idx + 1}:`}</label>
          <br />
          Title <input
            type="text"
            name={catId}
            data-id={idx}
            id={catId}
            value={props.dynamicAttributes[idx].title} 
            className="title"
          /><br/><br/>
          Image: <input
            type="file"
            data-id={idx} id={ageId} className="image"
          />
          <br/><br/>
          Description<input
            type="text"
            name={catId}
            data-id={idx}
            id={catId}
            value={props.dynamicAttributes[idx].description} 
            className="description"
          />
          <br/>
        </div>
      )
    })
  )
}
export default DynamicInputs

功能：

handleChangeattribute = async (e) => {
  // here I got all function of the event including value of e.target.dataset.id
  if (["title", "image", "description"].includes(e.target.className) ) {
    let dynamicAttributes = [...this.state.dynamicAttributes]
    if(e.target.className === "title") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    if(e.target.className === "image") {
          let data
          await axios.post(data)
            .then((result) => {
               data = result
            });
            console.log("e.target", e) 
            console.log("e.target", e.target)
          dynamicAttributes[e.target.dataset.id][e.target.className] = data
    }
    if(e.target.className === "description") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    this.setState({ dynamicAttributes }, () => console.log(this.state.dynamicAttributes))
  } else {
    this.setState({ [e.target.title]: e.target.value })
  }
}

当我选择图像然后完成 axios 调用时，我收到这样的错误

ExploreDetails.js:86 Uncaught (in promise) TypeError: Cannot read property 'dataset' of null

在第一个控制台的handleChangeattribute方法中，我得到了这个，在第二个中我得到了null

在此处输入图像描述

标签： javascriptreactjs

解决方案

我在这里重构了代码。请让我知道它是否有效。您将 async/await 与 with 结合使用.then()没有意义，因此我已将其更改为仅使用.then().

handleChangeattribute = (e) => {
  // here I got all function of the event including value of e.target.dataset.id
  if (["title", "image", "description"].includes(e.target.className)) {
    let dynamicAttributes = [...this.state.dynamicAttributes]
    if (e.target.className === "title") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    if (e.target.className === "image") {
      let data
      axios.post(data)
        .then((result) => {
          console.log("e.currentTarget", e.currentTarget)
          dynamicAttributes[e.currentTarget.dataset.id][e.target.className] = result
        });
    }
    if (e.target.className === "description") {
      dynamicAttributes[e.target.dataset.id][e.target.className] = e.target.value
    }
    this.setState({ dynamicAttributes }, () => console.log(this.state.dynamicAttributes))
  } else {
    this.setState({ [e.target.title]: e.target.value })
  }
}

推荐阅读