选择带有信息的 div 时未定义

Question

我的一段代码有问题。我从 Flask 服务器获取，并在 React 中用 div 显示。我想选择 div 并将该信息传递到一个新的对象数组以返回到 Flask，但我一直未定义。

代码片段：

function PLCPage() {
  const [myjunk, setMyjunk] =  useState([]);
  const [devList, setDevList] = useState ([]);

  const Scan = () => {
    fetch('/api/home').then(response => {
      if(response.status === 200){
        return response.json()
      }
    })
    .then(data => setMyjunk(data))
    .then(error => console.log(error))
  }

  const Clear = () => {
    setMyjunk({})
  }

创建div：

{Object.keys(myjunk).map((key) =>{
  return ( 
    <div className='plc-container' key={key} onClick={ReadStuff}>
      <h1>ID:{myjunk[key]['name']}</h1> 
      <h1>IP:{myjunk[key]['IP']}</h1>                      
    </div>
  )

单击div，只是为了返回控制台日志，返回未定义。

const ReadStuff = () => {
  console.log(this.IP)
}

我最终想将 2 h1 标签中的数据返回到一个新对象（devList），但我什至无法将其获取到控制台日志。抱歉，如果这是基本的，但我已经被这个问题困扰了一个星期了。谢谢，

我已经尝试过this.IP、myjunk.IP、this、myjunk.IP。 myjunk['IP'].什么都没有返回。当我执行 myjunk.IP 时，我得到“无法从未定义中读取”

Answer 1

做到这一点的一种方法是创建一个单独的组件：

const JunkButton = ({junk}) => (
    <div className='plc-container' key={key} onClick={() => ReadStuff(junk)}>
        <h1>ID:{junk['name']}</h1> 
        <h1>IP:{junk['IP']}</h1>
    </div>
)

现在您的 map（）看起来像：

{Object.keys(myjunk).map((key) =>{ <JunkButton junk={ myjunk[key] }/> }

和 readStuff 变为：

const ReadStuff = (junk) => { console.log(junk) }

请注意，请注意我们如何明确地将事物作为prop或props或功能参数。

Answer 2

首先，您需要将 myjuck 进行功能，然后像这样安装它：

{Object.keys(myjunk).map((key) =>{
          return (
    // sending myjuck to function whatever that is
            <div className='plc-container' key={key} onClick={() => ReadStuff(myjunk)}>
              <h1>ID:{myjunk[key]['name']}</h1> 
              <h1>IP:{myjunk[key]['IP']}</h1>                      
            </div>
          )

readstuff函数

   const ReadStuff = (myjunk) => { console.log(tmyjunk) }