更改对象属性以匹配给定数组中的值

Posted 2023-02-22

【中文标题】更改对象属性以匹配给定数组中的值

【英文标题】：change object property to match values in given array

【发布时间】：2020-01-13 20:07:54

【问题描述】：

这是我的应用程序结构

Codepen 示例：https://codesandbox.io/s/awesome-blackwell-kd3nn

class MasterForm extends Component 
  constructor() 
    super();

    this.state = 
      userInput: "",
      available: "",
      silos: []
    ;
  

  handleFormSubmit = e => 
    e.preventDefault();
    this.silo_1Lookup();
  ;

  handleInputChange = e => 
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState(
      [name]: value
    );
  ;

  silo_1Lookup = () => 
    let silos = [...this.state.silos];

    silos.push(
      userInput: this.state.userInput,
      available: this.state.available
    );

    this.setState(
      silos,
      userInput: "",
      available: ""
    );

    const siloDepthFilling = 
      "0": "926",
      "0.5": "893",
      "1": "860",
      "1.5": "827",
      "2": "794",
      "2.5": "761",
      "3": "728",
      "3.5": "695",
      "4": "662",
      "4.5": "629",
      "5": "595"
    ;
    console.log("function ran");
    return siloDepthFilling[silos[0].userInput];
  ;

我正在尝试更改 silo[0].available 的属性以匹配我的 silo_1Lookup() 函数中的内容。

比如用户输入5，silos[0].available应该设置为“595”

if (silos[0].userInput === '5') 
 return silos[0].available = "595"

有点像，但使用 silo_1Lookup() 中的字典；

目前，函数运行，但 silos[0].available 没有更新为新值，也没有错误消息

【问题讨论】：

看起来你在调用silo_1Lookup()之后没有调用setState()。

@Nikhil 应该在哪里？我已将其移至 silo_1lookup() 的底部，但仍然无法正常工作

看看我的回答：***.com/a/57898783/2924577.

在处理程序中，你必须调用 silo_1Lookup

【参考方案1】：

更改available 值后，您没有更新状态。

在您的函数中，进行必要的更改后调用setState()。

您正在使用silos 来显示userInput 和available。所以更新 silos 会改变视图，而不是 available。

silo_1Lookup = () => 

    const siloDepthFilling = 
      "0": "926",
      "0.5": "893",
      "1": "860",
      "1.5": "827",
      "2": "794",
      "2.5": "761",
      "3": "728",
      "3.5": "695",
      "4": "662",
      "4.5": "629",
      "5": "595"
    ;
    console.log("function ran");

    let available = siloDepthFilling[this.state.userInput];

    let silos = [...this.state.silos];

    silos.push(
      userInput: this.state.userInput,
      available: available
    );

    this.setState(
      
        silos: silos,
        available: available
      
    );
  ;

另外，您没有将key 用于您的列表项，它会引发错误。对您的 Table 组件进行以下更改。

silos.map((silo, i) => 
     return (
        <tr key=i.toString()>
           <td>silo.userInput</td>
           <td>silo.available</td>
        </tr>
      );
 )

现场演示： https://codesandbox.io/s/vigorous-jennings-wlw8j

【讨论】：

这是我在阅读您的评论后最初尝试的，但可用的保持不变

@invrt - 没有任何其他信息，很难判断出了什么问题。在StackBlitz 或类似网站中复制问题，并使用链接更新您的问题。

当我再次执行代码时它似乎可以工作，但是是的......我会尝试复制代码库

这里有一个密码笔codesandbox.io/s/awesome-blackwell-kd3nn

@invrt - 查看我编辑的答案。进行那些应该起作用的更改。现场演示：codesandbox.io/s/vigorous-jennings-wlw8j

【参考方案2】：

您的问题的根本原因是，每次您的数组 silos[] 都需要更新时，您将获得 available 的新值。所以下面给出了方法。

  handleInputChange = e => 
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState(
      [name]: value
    );
  ;

  silo_1Lookup = () => 
    let silosss = [...this.state.silos];
    const siloDepthFilling = 
      "0": "926",
      "0.5": "893",
      "1": "860",
      "1.5": "827",
      "2": "794",
      "2.5": "761",
      "3": "728",
      "3.5": "695",
      "4": "662",
      "4.5": "629",
      "5": "595"
    ;

    // Push user input and available value in array
    silosss.push(
      userInput: this.state.userInput,
      available: siloDepthFilling[this.state.userInput]
    );

    // Finally update the state of both array and available value
    for(var item of silosss)
      this.setState(
        silos:silosss,
        available: item.available
      );
    
  ;

最后，输出应该是这样的

【讨论】：

在 for 循环中调用 setState() 效率低且冗余，因为每次迭代都会覆盖先前的状态，并且每次只在状态中设置最后一次迭代的值。

@Nikhil：感谢您的评论，我关心的是通过在输出屏幕中设置状态并将值推送到数组中来显示可用值每次都在变化。但当然，你是对的。我同意。我不想编辑我的代码，因为您的评论可以成为上述代码中每个人的另一个学习点..