Question

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

2019-09-12

82

javascript arrays reactjs ecmascript-6

这是我的应用程序结构

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];
  };
}

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

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

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

有点像那样，但使用 silo_1Lookup() 内的字典；

目前，该函数正在运行，但 silos[0].available 未使用新值进行更新，并且没有错误消息

Answer 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

Answer 2

问题的根本原因是，每次获取 available 的新值时，您都需要更新数组 silos[] 。因此，方法如下。

  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
      });
    }
  };

最后，输出应该是这样的