javascript - 如何使用箭头函数 setState 更改不在数组中的对象

Question

我想做以下事情:

将对象值从下面的对象更改为新的内容。

newClass: {
      classTime: {
        hour: "",
        minutes: ""
      },

我的完整代码集如下所示:

• 如您所见，我有 hour和minutes显示在 timeArray对象，与 newClass 完全相同对象。

所以我想使用 setState({hour: 'newData'})可能会导致问题，因为此对象键并未唯一显示在我的 state 中.

另外，我想了解使用 setState 是否会出现这种情况与 =>功能。我真的想继续改变这个状态，因为我会使用 callback function 来传递它。这样我就可以在 newClass 中添加信息到一个对象数组中。这意味着newClass将是一个旨在将信息传输到我的 parent 的对象component 。

不管怎样，我对 setState 的使用还是有一些疑问的以及prevState ，并在 arrow function 上使用它语法。

完整代码为here

我们在这里看到的是fromTwoWayBindingToNewObj function

import React from "react";
import TimePicker from "react-time-picker";
import "./styles.css";

class App extends React.Component {
  state = {
    time: "0:00",
    timeArray: [{ className: "whatever", time: { hour: 10, minutes: 15 } }],
    newClass: {
      classTime: {
        hour: "",
        minutes: ""
      },
      instructor: "Kasturi"
    }
  };

  onChangeTimeHandler = time => {
    this.setState({ time });
  };

  pushTimeHandler = () => {
    //gets the time from the TimePicker State
    let time = this.state.time;
    const [hour, minutes] = time.split(":").map(Number);
    const obj = { hour, minutes };
    this.setState(({ timeArray }) => ({
      timeArray: [...timeArray, { hour: obj.hour, minutes: obj.minutes }]
    }));
  };

  //this is the function that I am trying to implement with setState
  fromTwoWayBindingToNewObj = () => {
    let time = this.state.time;
    const [hour, minutes] = time.split(":").map(Number);
    const obj = { hour, minutes };
    this.setState(({ classTime }) => ({
      ClassTIme: { hour: obj.hour, minutes: obj.minutes }
    }));
  };

  render() {
    let arrayOfTime = [...this.state.timeArray];
    let render =
      arrayOfTime.length > 0
        ? arrayOfTime.map((time, index) => (
            <p key={time[index]}>
              hour:{time.hour} minute:{time.minutes}
            </p>
          ))
        : null;
    return (
      <div className="App">
        <TimePicker
          onChange={this.onChangeTimeHandler}
          value={this.state.time}
        />
        <h2>Time Displayed Below</h2>
        <p>{this.state.time}</p>
        <hr />
        <h2>Temporary Objec New Class Display</h2>
        <p>
          CLass Time: Hour: {this.state.newClass.classTime.hour} Minutes:
          {this.state.newClass.classTime.minutes}
        </p>
        <button onClick={this.fromTwoWayBindingToNewObj}>
          Update Temp Obj
        </button>
        <hr />
        <h2>The Array of time below</h2>
        <p>{render}</p>
        <button onClick={this.pushTimeHandler}>Push New Time</button>
      </div>
    );
  }
}

export default App;

Answer 1

  this.setState(({ classTime }) => ({
    ClassTIme: { hour: obj.hour, minutes: obj.minutes }
  }));

ClassTIme 不正确，因为您所在的州不存在该值，并且未使用 { classTime }。在您的状态上，您有 newClass: { classTime: } 并且您的渲染返回试图访问这些属性 CLass Time: Hour: {this.state.newClass.classTime.hour} Minutes: .

我认为您正在尝试返回:

return {
    newClass: {
        classTime: {
            hour: obj.hour,
            minutes: obj.minutes
        }
    }
}

<小时/>

你是对的，你可以使用setState中的回调参数来简化prevState。我将通过一步一步的分解来提供帮助。

1. 将逻辑移至 setState 中，并更改了箭头函数，使其使用 block 体，因此需要使用return。

  fromTwoWayBindingToNewObj = () => {
    this.setState(prevState => {
      let time = prevState.time;
      const [hour, minutes] = time.split(":").map(Number);
      const obj = { hour, minutes };

      return {
        newClass: {
          classTime: {
            hour: obj.hour,
            minutes: obj.minutes
          }
        }
      }
    });
  };

使用 Destructuring Assignment 简化了您的逻辑。您仅使用州政府提供的时间。

  fromTwoWayBindingToNewObj = () => {
    this.setState(({time}) => {
      const [hour, minutes] = time.split(":").map(Number);
      const obj = { hour, minutes };

      return {
        newClass: {
          classTime: {
            hour: obj.hour,
            minutes: obj.minutes
          }
        }
      }
    });
  };

使用Shorthand Property Names我们可以摆脱使用obj.hour。

  fromTwoWayBindingToNewObj = () => {
    this.setState(({ time }) => {
      const [hour, minutes] = time.split(":").map(Number);
      return { newClass: { classTime: { hour, minutes } } };
    });
  };