Aktualisieren des Werts im verschachtelten Objekt des Objekts in React Native
Ich habe den Status wie folgt festgelegt
const [stories, setStories] = useState([]);
Ich rufe Daten von der API im Array ab, ordne das Array zu und setze die using setStories wie folgt:
setStories(prevState => prevState.concat({user: {name: 'XYZ', profile: 'ABC', stories: [{id: 1, image: 'testing'}];
Die obigen Codes funktionieren einwandfrei, aber ich stecke fest, wenn ich die neueste Geschichte zusammenfassen muss, wenn die ID nicht mit den abgerufenen Daten übereinstimmt. Ich habe unten Lösung versucht, aber es hat nicht geholfen:
stories.map(story => {
if(story && story.hasOwnProperty(key)){
//where above key is the user key fetched from the another API, i.e., user key
story?.[key].stories.map(storedStory =>
id(storedStory.id !== fetchedStory.id){
story?.[key].stories.concat({story})}
Der obige Code hat jedoch nicht funktioniert, da er nur den Status mutiert und ein erneutes Rendern vermeidet. Auf der Suche nach einer sauberen und effizienten Methode, um dies zu überwinden. Vielen Dank
Es ist schwer zu sagen, was Sie erreichen wollen, ohne ein vollständiges Beispiel zu sehen. Aber ich denke, Ihr Hauptproblem ist, dass Sie nicht den zurückgegebenen Wert von verwenden map, und von der Benennung sieht es so aus, als würden Sie das falsche Element anhängen.
Es wird helfen, zuerst zu vereinfachen.
const newState = stories.map(story => {
if (story?.hasOwnProperty(key)) {
const found = story[key].stories.find(s => s.id === fetchedStory.id);
if (found) {
return story;
} else {
// Let's make a new object with the fetchedStory
// appended into THIS user's stories
return {
...story,
[key]: {
...story[key],
stories: [
...story[key].stories,
// This is supposed to be fetchedStory
// not `story` right??
fetchedStory,
]
}
}
}
} else {
return story;
}
});
setStory(newState);
Bearbeiten: Es fällt Ihnen schwer, Ihre Geschäftslogik auszudrücken, und die Komplexität der Datenstruktur hilft nicht weiter. Vereinfachen Sie also weiter, kapseln Sie die komplexe Syntax in Funktionen und drücken Sie Ihre Geschäftslogik klar aus. Dh
const appendStory = (originalObject, userId, storyToAppend) => {
return {
...originalObject,
[userId]: {
...originalObject[userId],
stories: [
...originalObject[userId].stories,
storyToAppend,
]
}
}
};
const userExistsInList = (users, user) => {
return users?.hasOwnProperty(user);
}
const newStoryAlreadyInStories = (stories, newStory) => {
return stories.find(s => s.id === newStory.id);
}
const newState = stories.map(story => {
if (userExistsInList(story, key)) {
const found = newStoryAlreadyInStories(story[key].stories, fetchedStory);
if (found) {
// User is already in state and the new story is already in the list
// Add business logic here
} else {
// User is already in state and the new story
// is not in their list
// Add business logic here
}
} else {
// User is not in the list yet
// Add business logic here
}
});