Stworzyłem sklep MOBX (reaguj rodzime projekt) i aktualizując wartość przycisku przycisku. Stan pomyślnie aktualizuje wyświetlany w dzienniku konsoli, ale dom nie renderowania z zaktualizowanym stanem.

Większość odpowiedzi na tak jest trochę przestarzałe, ponieważ zalecają dodawanie @observable w odpowiednich miejscach, ale najnowsze doktorze MOBX mówią, aby użyć innej składni z {X1}}.

( edytuj : Codesandbox , dzięki czemu można zobaczyć w domu

Oto moja aktualna konfiguracja:

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>
  );
});

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>
  )
}
0
crevulus 15 marzec 2021, 11:52

1 odpowiedź

Najlepsza odpowiedź

Ta linia jest problemem:

const store = new ChooseTea();

Odtwarzasz sklep z każdym renderowaniem. Twój komponent reaguje na zmiany, rozpoczyna renendator, ale wtedy nowy sklep jest tworzony, a tea nie jest tam domyślnie wybrany. Więc zmieniasz dane w starym sklepie, ale następnie użyj danych z nowo utworzonych.

Co możesz zrobić, to używać useState lub useMemo dla sklepu, tak jak:

const [store] = useState(() => new ChooseTea());

Musisz także zdefiniować wszystkie swoje nieruchomości, nie zadziała inaczej (lub przynajmniej bez Dodatkowa konfiguracja):

export class ChooseTea {
  // Use null or empty string "", for example
  tea = null;

  constructor() {
    makeAutoObservable(this);
  }

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

Codesandbox

1
Danila 15 marzec 2021, 13:47