如何用信号改变属性值

Question

我有以下反应代码：

import { signal } from '@preact/signals';

...
    const initalRequest: IRequest = {
    "SiteDisplayName": "Something",
    "SiteName": "",
    "SiteDescription": "",
    "SiteMembers": [],
    "SiteOwner": "",
    "Sitetype": SiteTypes.WithoutTeams,
  };
  const siteRequest = signal(initalRequest);

  const onTextFieldChange = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
    //console.log('onTextFieldChange', ev.currentTarget.id);
    switch (ev.currentTarget.id) {
      case "Name": siteRequest.value.SiteName = newText; break; // remove spaces .split(' ').join('') 
      case "SiteDisplayName" : siteRequest.value.SiteDisplayName = newText; break;
      case "SiteDescription" : siteRequest.value.SiteDescription = newText; break;    
      default:break;
    }
    
    // Case "" :siteRequest.value.SiteOwner = "";
  };

  return (
    <section className={`${styles.createNoProjectSite} ${hasTeamsContext ? styles.teams : ''}`}>
      <h2>Well done, {escape(userDisplayName)}!</h2>
      <TextField id='Name' label="Site Name" value={siteRequest.value.SiteName} onChange={onTextFieldChange}       />
      <TextField id='SiteDisplayName' label="Site Display Name" value={siteRequest.value.SiteName} onChange={onTextFieldChange}       />
      <TextField id='SiteDescription' label="Site Description" value={siteRequest.value.SiteName} onChange={onTextFieldChange}  multiline={true}     />
      <div>{siteRequest.value.SiteDescription}</div>
      <br />
      <pre>{JSON.stringify(siteRequest.value, null, 2)}</pre>
    </section>

没有错误，但对象“siteRequest”的值永远不会改变。 语法“siteRequest.value.SiteName = newText;”是错误的或 preact 信号不适用于数组外的对象。

任何人都可以展示我的光吗？ :-) “deepsignal” 可以作为答案吗？

谢谢

Answer 1

完全公开，我是维护者之一。

您遇到的问题是您将信号值设置为一个对象，然后改变该对象的属性——这些属性本身并不是信号。对于要更新的信号，您需要直接分配给信号的

value

属性。

由于各种技术原因，Signals 不提供开箱即用的深度反应。

您确实可以使用包装 Signals 的库之一来添加深度反应性，或者简单地更改您的代码以改变整个对象，即：

case "Name":
    siteRequest.value = { ...siteRequest.value, SiteName = newText };
    break;