Javascript 如何使用 SetStoreFunction 修改 SolidJS Store 中数组中的对象成员，并自动更新相应的视图

我正在try 使用SetStoreFunction(SetExpressions)修改SolidJS存储的一个元素，以便更新存储的值的视图，例如在文本字段中输入文本时.

我最初认为问题与调用SetStoreFunction本身有关，但登录getExpressionSetValue的控制台显示设置正在工作.因此，问题出在设置发生后更新视图.

我的期望是，在使用store 时，它会自动处理.我不确定是我用错了，还是出了什么问题

完整代码:

import { createStore } from "solid-js/store";
import type { Component } from 'solid-js'
import { For } from 'solid-js';
import { TextField } from "@kobalte/core"
import { Button } from "@kobalte/core"

interface Expression {
  id: number,
  label: string,
  value: string,
}

interface ExpressionViewProps extends Expression {
  removeExpression: () => void
  setValue: (value:string) => void
}

const ExpressionView: Component<ExpressionViewProps> = (props) => {

  return (
    <div>
      <TextField.Root 
        value={props.value} //todo why doesn't this value update automatically?
        onChange={props.setValue}>
        <TextField.Label>
          {props.label}
        </TextField.Label>
        <br/>
        <TextField.Input />
        <TextField.Description />
        <TextField.ErrorMessage />
      </TextField.Root>
      <Button.Root class="button" onClick={props.removeExpression}>-</Button.Root>
    </div>
  )
}

const App: Component = () => {

  const [expressions, setExpressions] = createStore<Expression[]>([])
  let expressionId = 0

  const addExpression = () => {
    setExpressions(() => {
      const id = ++expressionId
      return [...expressions, {id: id, label: `Expression ${id}`, value: "inital value 0"}]
    })
  }

  const getRemoveExpression = (id: number) => {
    return () => {
      setExpressions(() =>
        expressions.filter(expression => expression.id != id)
      )
    }
  }

  const getExpressionSetValue = (id: number) => {
    return (value: string) => {
      console.log(value)
      setExpressions(expression => expression.id == id, 'value', value)
      console.log(expressions)
    }
  }

  return (
    <div>
      <For each={expressions}>{(expression) => {
        const expressionViewProps: ExpressionViewProps = {
          ...expression,
          removeExpression: getRemoveExpression(expression.id),
          setValue: getExpressionSetValue(expression.id),
        }
        return <ExpressionView {...expressionViewProps}/>
      }}</For>
      <Button.Root class="button" onClick={addExpression}>+</Button.Root>
  </div>
  )
}

export default App;

更新8/8:

我try 切换到原生UI元素，而不是使用Kobalte，现在它起作用了.例如:

const ExpressionView: Component<ExpressionViewProps> = (props) => {
  return (
    <div>
      <input
        value={props.value}
        onInput={(e) => props.setValue(e.target.value)}
      />
      <button type="button" onClick={() => props.removeExpression()}>-</button>
    </div>
  )
}

和

      <button type="button" onClick={addExpression}>+</button>

I still don't underst和 what's going on here 和 would like to fix the Kobalte version, because I'd like to use Kobalte