如何正确更改对象数组的状态值？

Question

想象一下这个变量：

let myArray = [
        {
            name: "animal",
            value: "",
        },
        {
            name: "fruit",
            value: "",
        },
        (...)
];

myArray 是一成不变的——它是硬编码的，它的长度不会改变，但它是一个包含 10 个元素的冗长数组。用户将仅通过 html 输入更新 myArray 对象 values。基于以上，myArray 是否可以被视为 Svelte 中的一个状态？
下面的示例是在 Svelte 中更改 myArray 状态的正确方法吗？

(...)
myArray.forEach(element => { 
    if (element.name === name) element.value = value;
});

我有一个按钮状态，它的 disabled 属性取决于 myArray 中具有某些值的所有元素。我可以使用 Sveltes $: btnIsDisabled 反应式语句来实现吗？

<button type="submit" disabled={btnIsDisabled}>
    Submit me
</button>

Answer 1

我假设您计划将数组用作 component-state。并且你有一个对应于每个字段的输入。

尝试这样的事情：https://codesandbox.io/s/magical-fog-tfq3q

class App extends React.Component {
  state = {
    favorites: [
      { name: "animal", value: "" },
      { name: "city", value: "" },
      { name: "song", value: "" },
      { name: "place", value: "" },
      { name: "food", value: "" },
      { name: "sport", value: "" }
    ],
    emptyFields: null
  };

  handleOnChange = event => {
    const { favorites } = this.state;

    let updatedArr = favorites.map(favorite => {
      if (favorite.name === event.target.name) {
        return {
          ...favorite,
          value: event.target.value
        };
      } else {
        return favorite;
      }
    });

    let emptyFields = updatedArr.filter(favorite => {
      return favorite.value.length === 0;
    });

    this.setState({
      ...this.state,
      favorites: updatedArr,
      emptyFields: emptyFields
    });
  };

  createFavoriteInputs = () => {
    const { favorites } = this.state;
    return favorites.map(favorite => {
      return (
        <div key={favorite.name}>
          <label>{favorite.name} :</label>
          <input
            value={favorite.value}
            name={favorite.name}
            onChange={this.handleOnChange}
          />
        </div>
      );
    });
  };
  render() {
    const { emptyFields } = this.state;
    return (
      <div>
        {this.createFavoriteInputs()}
        <button
          disabled={!emptyFields || emptyFields.length > 0 ? true : false}
        >
          Submit
        </button>
        {!emptyFields ||
          (emptyFields.length > 0 && (
            <div>
              The following fields are required:
              <ul>
                {this.state.emptyFields.map(field => {
                  return <li key={field.name}>{field.name}</li>;
                })}
              </ul>
            </div>
          ))}
      </div>
    );
  }
}

所以现在在 emptyFields 状态下，如果有任何 emptyFields.

，我们就有一个 disabled 的按钮

handleOnChange() 帮助我们向右导航 state-value 以更新我们的数组，每当我们对表单上的输入之一进行更新时，都会在我们的状态中创建一个新数组。

如何正确更改对象数组的状态值？

How to properly change state value of array of objects?

state

reactjs

svelte