Javascript 在控制台日志中更新Mobx状态，但不重新呈现

我已经创建了一个MobX存储（React原生项目），并在单击按钮时更新状态值。如控制台日志中所示，状态正在成功更新，但DOM没有使用更新的状态重新呈现

因此，大多数答案都有点过时，因为他们建议在正确的位置添加

@observable

，但最新的MobX文档表示，使用

makeAutoObservable（this，{key:value}）

（编辑：因此您可以在Home.js中看到控制台登录按钮按下，但“you love…”未使用mobx存储值更新）

以下是我当前的设置：

store.js

import { makeAutoObservable, observable } from "mobx";

export class ChooseTea {
  tea;

  constructor() {
    makeAutoObservable(this, {
      tea: observable,
    });
  }

  selectTea = (tea) => {
    this.tea = tea;
  };
}

Home.js

import { ChooseTea } from "../data/store";
import { observer } from "mobx-react";

export const Home = observer(() => {
  const store = new ChooseTea();

  const handleChildChoose = (tea) => {
    store.selectTea(tea); // value passed to store
    console.log(store.tea); // successfully logs the new chosen tea
  };

  return (
    <View style={styles.container}>
      <Text>You love {store.tea}</Text> // does not update on new tea chosen
      <View style={styles.teaCardContainer}>
        {teaData &&
          teaData.map((teaObj) => (
            <TeaCard
              id={teaObj.id}
              teaData={teaObj}
              key={teaObj.id}
              strength={teaStrength * 2}
              handleChoose={handleChildChoose}
            />
          ))}
      </View>
    </View>
  );
});

从“./data/store”导入{ChooseTea}；
从“mobx react”导入{observer}；
export const Home=观察者（（）=>{
const store=new ChooseTea（）；
const handleChildChoose=（茶）=>{
store.selectTea（tea）；//传递给store的值
console.log（store.tea）；//成功记录新选择的tea
};
返回(
您喜欢{store.tea}//不会更新所选的新茶
{teaData&&
teaData.map（（teaObj）=>(
))}
);
});

TeaCard.js

function TeaCard({ teaData, handleChoose }) {
  const handleClick = (tea) => {
    handleChoose(tea); // value passed to parent component (Home.js)
  };

  return (
    <View>
      <View>
        <Text>{teaData.name}</Text>
      </View>
      <Rating count={teaData.rating} />
      <Button
        title="Choose"
        onPress={() => handleClick(teaData.name)}
        color={AppStyles.colour.secondary}
       />
    </View>
  )
}

函数TeaCard（{teaData，handleChoose}）{
const handleClick=（tea）=>{
handleChoose（tea）；//传递给父组件（Home.js）的值
};
返回(
{teaData.name}
handleClick（teaData.name）}
color={AppStyles.color.secondary}
/>
)
}

这一行就是问题所在：

const store=new ChooseTea（）

您正在每个渲染上重新创建存储。您的组件实际上会对更改做出反应，开始重新招标，但随后会创建新的存储，默认情况下，
tea
不会被选中。所以，您正在更改旧存储中的数据，但使用新创建的存储中的数据

您可以为您的商店使用
useState
或
usemo
，如下所示：

const[store]=useState（（）=>newchoosetea（））

您还需要定义所有属性，否则它将不起作用（或者至少没有）：

谢谢您的回复！我尝试了你建议的
useState
语法和
conststore=usemo（（）=>newchoosetea（），[]），但遗憾的是两者都不起作用。有艾达吗？你可能弄错了！您能提供Codesandbox示例吗？编辑并添加了Codesandbox链接！哦，我明白了，你还需要定义一些属性，它们不能是空的/未定义的（至少没有额外的配置），我会更新我的答案！工作起来很有魅力。非常感谢。
export class ChooseTea {
  // Use null or empty string "", for example
  tea = null;

  constructor() {
    makeAutoObservable(this);
  }

  selectTea = (tea) => {
    this.tea = tea;
  };
}