【问题标题】：Trying to pass variable outside the function试图在函数外传递变量
【发布时间】：2021-03-14 04:08:50
【问题描述】：

我想将索引变量从映射传递到事件更改函数。代码如下：

{this.data &&
  this.data.map((item, index) => (
    <tr className="table-info" key={index}>
      <td>{index}</td>
      <td>{item.namaPengirim}</td>
      <td>{item.namaPenerima}</td>
      <td>{item.jenisPengiriman}</td>
      <td>{item.berat}</td>
      <td>{item.volume}</td>
      <td>{item.Harga}</td>
      <td>
        <select
          onChange={(key, event) => {
            this.props.onProsesChange(key, event, index);
          }}
          value={this.props.proses}
          className="form-control"
        >
          <option></option>
          <option value="Delivered">Delivered </option>
          <option value="On Process">On Process</option>
        </select>
      </td>
    </tr>
  ))}

如您所见，索引变量位于onchange 函数之外。当我试图通过它时，它会在console.log 中返回undefined。

这是我在 App.js 中的 onProsesChange

onProsesChange(事件,索引){

   let data = JSON.parse(localStorage.getItem('proses'))
   console.log(data)
   console.log(this.state.proses)
   console.log(index)
   if(data && data[index]){
    data[index]=event.target.value   
    this.setState({...this.state,proses:data})
    localStorage.setItem('proses',JSON.stringify(data))
   }else{
    data[index]=event.target.value
    this.setState({...this.state,proses:[event.target.value]})
    localStorage.setItem('proses',JSON.stringify([data]))

   }
    
}

【问题讨论】：

范围只深入/内部而不是外部。如果你想要外面的东西，在外面声明一个变量并在里面赋值。
你这是什么意思？对不起，我不太明白
index is 在范围内（entire array.map 回调），所以这里看起来没问题.您可以在问题中包含onProsesChange 吗？您在哪里以及在哪里进行控制台日志记录？
什么是onProsesChange？
我在帖子中添加了 onProsesChange。

标签： javascript reactjs react-router jsx

【解决方案1】：

问题

函数签名与调用方式不匹配。

onProsesChange(event, index) {
  let data = JSON.parse(localStorage.getItem("proses"));
  console.log(data);
  console.log(this.state.proses);
  console.log(index);
  if (data && data[index]) {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: data });
    localStorage.setItem("proses", JSON.stringify(data));
  } else {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: [event.target.value] });
    localStorage.setItem("proses", JSON.stringify([data]));
  }
}

...

onChange={(key, event) => {
  this.props.onProsesChange(key, event, index);
}}

当调用它时，会传递key、event 对象，最后是index。

解决方案 1

通过同时消费key来匹配签名

onProsesChange(key, event, index) {
  let data = JSON.parse(localStorage.getItem("proses"));
  console.log(data);
  console.log(this.state.proses);
  console.log(index);
  if (data && data[index]) {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: data });
    localStorage.setItem("proses", JSON.stringify(data));
  } else {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: [event.target.value] });
    localStorage.setItem("proses", JSON.stringify([data]));
  }
}

解决方案 #2

不通过key匹配签名

onChange={(key, event) => {
  this.props.onProsesChange(event, index);
}}

【讨论】：