SolidJS•9mo ago

when changing a dynamic variable that contains json <For> will not be re-rendered

I have a variable createsignal and it contains json and during actions on the page it receives data from the server and through the <For> element it should be displayed every time the variable is changed but it doesn't work what to do?

111 Replies

lxsmnsyc•9mo ago

do you have any example code

ДикийOP•9mo ago

html part or js?

lxsmnsyc•9mo ago

which ever code is related to your problem

ДикийOP•9mo ago

There's mostly js in there but it's very huge and complex

lxsmnsyc•9mo ago

then a repro would be great

ДикийOP•9mo ago

i can explain how it works

lxsmnsyc•9mo ago

I'm not sure an explanation would be helpful here. A repro helps demonstrate the issue better

ДикийOP•9mo ago

Our JS code produces JSON like this:

{
  success: {
    username123: {
      posts: [{},{},{}]
    }
  }
}

{
  success: {
    username123: {
      posts: [{},{},{}]
    }
  }
}

And when our code adds more posts to the posts list, or adds other users to JSON (example below), the For list is not re-rendered.

{
  success: {
    username123: {
      posts: [{},{},{},{},{},{}]
    },
    cool_username: {
      posts: [{},{}]
    }
  }
}

{
  success: {
    username123: {
      posts: [{},{},{},{},{},{}]
    },
    cool_username: {
      posts: [{},{}]
    }
  }
}

And here's the For code:

<For each={Object.keys(props.users().success)}>

<For each={Object.keys(props.users().success)}>

<For each={props.users().success[id].posts}>

<For each={props.users().success[id].posts}>

And there are no problems in the js code that generates the json

lxsmnsyc•9mo ago

How are you updating props.users?

ДикийOP•9mo ago

What do you mean?

lxsmnsyc•9mo ago

like how are you updating it's signal

ДикийOP•9mo ago

in index.jsx I have

let [users, setUsers] = createSignal([]);

let [users, setUsers] = createSignal([]);

<Users users={users} />

<Users users={users} />

lxsmnsyc•9mo ago

yes, how are you updating the users

пипъ trombalny•9mo ago

usersJson = await axios.... //request to api setUsers(usersJson);

peerreynders•9mo ago

That's not how it works. You need to use setUsers to set a new value (object) which is referentially different from the old value.

пипъ trombalny•9mo ago

that's what we do.

REEEEE•9mo ago

try setting {equals: false} option on the signal

let [users, setUsers] = createSignal([], {equals: false});

let [users, setUsers] = createSignal([], {equals: false});

ДикийOP•9mo ago

this doesn't working

REEEEE•9mo ago

hmmm And what is under the <For> What are you displaying with the data?

ДикийOP•9mo ago

swiper slider

REEEEE•9mo ago

Could you show a little bit of the code?

ДикийOP•9mo ago

пипъ trombalny•9mo ago

REEEEE•9mo ago

Okay, and nothing is updated in the For? Is the Swiper component from a library?

пипъ trombalny•9mo ago

yes

REEEEE•9mo ago

Which library?

пипъ trombalny•9mo ago

https://v8.swiperjs.com/

Swiper

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

peerreynders•9mo ago

Where does it list Swiper SolidJS? Found it Their landing page doesn't show it.

ДикийOP•9mo ago

REEEEE•9mo ago

I don't see any exact issues with the code for the For, could be something else 🤔 If you console log in an effect, do you get the updated data?

createEffect(() => {
  console.log(props.users())
})

createEffect(() => {
  console.log(props.users())
})

ДикийOP•9mo ago

createeffect is not called

REEEEE•9mo ago

so the data might not be getting updated Especially if you're using {equals: false} and it's still not calling the createEffect

ДикийOP•9mo ago

If I add an interval to the props.users() output, it will show that the data is being updated

REEEEE•9mo ago

right, but we want the effect to do that on it's own. I think reactivity is being broken somewhere

peerreynders•9mo ago

To me that would suggest that you are modifying the object but are not calling setUsers again.

ДикийOP•9mo ago

REEEEE•9mo ago

yeah that could be a possibility. Show a bit of the code of the axios request and calling setUsers does the <Users/> component destructure props (although it shouldn't matter here) or is using mergeProps?

ДикийOP•9mo ago

i dont understand im just using props

REEEEE•9mo ago

okay I don't see any exact issues with your code. Could you show the code where you are calling setUsers

пипъ trombalny•9mo ago

https://tenor.com/view/there%27s-nothing-we-can-do-gif-14390726165144583214

Tenor

пипъ trombalny•9mo ago

    const start = async () => {
        const usersResponse = await getPosts(0, checkedUsers());
        let checked = checkedUsers();
        if (usersResponse) {
            checked.push(
                Number(
                    usersResponse.success[Object.keys(usersResponse.success)[0]].author_id
                )
            );

            setCheckedUsers(checked);
            setUsers(usersResponse);
            setAllUsersId(
                Object.keys(usersResponse.success).map((user) =>
                    Number(usersResponse.success[user].author_id)
                )
            );
        }
    };

    const start = async () => {
        const usersResponse = await getPosts(0, checkedUsers());
        let checked = checkedUsers();
        if (usersResponse) {
            checked.push(
                Number(
                    usersResponse.success[Object.keys(usersResponse.success)[0]].author_id
                )
            );

            setCheckedUsers(checked);
            setUsers(usersResponse);
            setAllUsersId(
                Object.keys(usersResponse.success).map((user) =>
                    Number(usersResponse.success[user].author_id)
                )
            );
        }
    };

REEEEE•9mo ago

I actually see no issues 🤣 @lxsmnsyc 🤖 Do you see anything wrong here?

пипъ trombalny•9mo ago

    const onUserSwipe = async (user) => {
        setCurrentUser(user);
        const currentPost = user.slides.filter((element) =>
            element.className.endsWith("active")
        )[0];
        let checked = checkedUsers();
        if (!checked.includes("" + currentPost.id)) {
            setCurrentUser(currentPost.id);
            checked.push(currentPost.id);
            console.log(checked);
        }
        setCheckedUsers(checked);

        const [usersStatic, checkedUsersStatic, allUsersIdStatic] = [
            Object.keys(users().success),
            checkedUsers(),
            allUsersId(),
        ];
        const difference = usersStatic.length - checkedUsersStatic.length;
        let usersJson = users();
        if (difference === 1) {
            const usersResponseToAdd = await getPosts(0, allUsersIdStatic);
            if (usersResponseToAdd) {
                Object.keys(usersResponseToAdd.success).map(
                    (user) => (usersJson.success[user] = usersResponseToAdd.success[user])
                );
                setUsers(usersJson);
            }
        }
    };

    const onUserSwipe = async (user) => {
        setCurrentUser(user);
        const currentPost = user.slides.filter((element) =>
            element.className.endsWith("active")
        )[0];
        let checked = checkedUsers();
        if (!checked.includes("" + currentPost.id)) {
            setCurrentUser(currentPost.id);
            checked.push(currentPost.id);
            console.log(checked);
        }
        setCheckedUsers(checked);

        const [usersStatic, checkedUsersStatic, allUsersIdStatic] = [
            Object.keys(users().success),
            checkedUsers(),
            allUsersId(),
        ];
        const difference = usersStatic.length - checkedUsersStatic.length;
        let usersJson = users();
        if (difference === 1) {
            const usersResponseToAdd = await getPosts(0, allUsersIdStatic);
            if (usersResponseToAdd) {
                Object.keys(usersResponseToAdd.success).map(
                    (user) => (usersJson.success[user] = usersResponseToAdd.success[user])
                );
                setUsers(usersJson);
            }
        }
    };

    const onUserHorizontalSwipe = async (user) => {
        let json = checkedHorizontalPosts();
        let usersStatic = users();
        const slide = user.slides.filter((element) =>
            element.classList.value.includes("active")
        )[0];
        let [author_id, id] = [
            Number(slide?.id.split(" ")[1]),
            Number(slide?.id.split(" ")[0]),
        ];
        if (Object.keys(json).includes(String(author_id))) {
            if (!json[author_id].includes(id)) {
                json[author_id].push(id);
            }
        } else {
            json[author_id] = [id];
        }
        setCheckedHorizontalPosts(json);

        Object.keys(users().success).map(async (user) => {
            if (users().success[user].author_id === author_id) {
                const difference =
                    users().success[user].posts.length - json[author_id].length;

                if (difference == 2) {
                    const postsByUser = await getUserPosts(
                        users().success[user].posts[users().success[user].posts.length - 1]
                            .id,
                        author_id
                    );

                    if (postsByUser) {
                        postsByUser.success.map((post) => {
                            usersStatic.success[user].posts.push(post);
                        });
                    }
                }
            }
        });
        setUsers(usersStatic);
    };

    const onUserHorizontalSwipe = async (user) => {
        let json = checkedHorizontalPosts();
        let usersStatic = users();
        const slide = user.slides.filter((element) =>
            element.classList.value.includes("active")
        )[0];
        let [author_id, id] = [
            Number(slide?.id.split(" ")[1]),
            Number(slide?.id.split(" ")[0]),
        ];
        if (Object.keys(json).includes(String(author_id))) {
            if (!json[author_id].includes(id)) {
                json[author_id].push(id);
            }
        } else {
            json[author_id] = [id];
        }
        setCheckedHorizontalPosts(json);

        Object.keys(users().success).map(async (user) => {
            if (users().success[user].author_id === author_id) {
                const difference =
                    users().success[user].posts.length - json[author_id].length;

                if (difference == 2) {
                    const postsByUser = await getUserPosts(
                        users().success[user].posts[users().success[user].posts.length - 1]
                            .id,
                        author_id
                    );

                    if (postsByUser) {
                        postsByUser.success.map((post) => {
                            usersStatic.success[user].posts.push(post);
                        });
                    }
                }
            }
        });
        setUsers(usersStatic);
    };

REEEEE•9mo ago

and it doesn't even work with {equals: false}? That's so weird.

пипъ trombalny•9mo ago

When we put this option, the code starts replaying a billion times or just breaks SwiperJS

REEEEE•9mo ago

wait, that might be a good thing that means the signal is updating and the swiper is being updated There might be a loop somewhere causing it to keep replaying

пипъ trombalny•9mo ago

    let [users, setUsers] = createSignal([], { equals: false });
    let [checkedUsers, setCheckedUsers] = createSignal([]);
    let [allUsersId, setAllUsersId] = createSignal([]);
    let [checkedHorizontalPosts, setCheckedHorizontalPosts] = createSignal({});
    let [currentUser, setCurrentUser] = createSignal();

    let [users, setUsers] = createSignal([], { equals: false });
    let [checkedUsers, setCheckedUsers] = createSignal([]);
    let [allUsersId, setAllUsersId] = createSignal([]);
    let [checkedHorizontalPosts, setCheckedHorizontalPosts] = createSignal({});
    let [currentUser, setCurrentUser] = createSignal();

    let [users, setUsers] = createSignal([], { equals: false });
    let [checkedUsers, setCheckedUsers] = createSignal([], { equals: false });
    let [allUsersId, setAllUsersId] = createSignal([], { equals: false });
    let [checkedHorizontalPosts, setCheckedHorizontalPosts] = createSignal(
        {},
        { equals: false }
    );
    let [currentUser, setCurrentUser] = createSignal();

    let [users, setUsers] = createSignal([], { equals: false });
    let [checkedUsers, setCheckedUsers] = createSignal([], { equals: false });
    let [allUsersId, setAllUsersId] = createSignal([], { equals: false });
    let [checkedHorizontalPosts, setCheckedHorizontalPosts] = createSignal(
        {},
        { equals: false }
    );
    let [currentUser, setCurrentUser] = createSignal();

first code breaks swiperjs

REEEEE•9mo ago

Do you get an error?

пипъ trombalny•9mo ago

second code repeats billion times

ДикийOP•9mo ago

REEEEE•9mo ago

okay, what happens when it breaks?

пипъ trombalny•9mo ago

ДикийOP•9mo ago

this swiper error like

REEEEE•9mo ago

I see

ДикийOP•9mo ago

when somewhere is variable broken

пипъ trombalny•9mo ago

but without {equals: true} swiper working

ДикийOP•9mo ago

or something else

REEEEE•9mo ago

this is okay, we can solve the problem from here or you could try using a store actually

ДикийOP•9mo ago

we just started porting the code over from next.js and it worked fine there

Gaming

Programming

when changing a dynamic variable that contains json <For> will not be re-rendered