SolidJS•10mo 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•10mo ago

do you have any example code

ДикийOP•10mo ago

html part or js?

lxsmnsyc•10mo ago

which ever code is related to your problem

ДикийOP•10mo ago

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

lxsmnsyc•10mo ago

then a repro would be great

ДикийOP•10mo ago

i can explain how it works

lxsmnsyc•10mo ago

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

ДикийOP•10mo 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•10mo ago

How are you updating props.users?

ДикийOP•10mo ago

What do you mean?

lxsmnsyc•10mo ago

like how are you updating it's signal

ДикийOP•10mo ago

in index.jsx I have

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

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

<Users users={users} />

<Users users={users} />

lxsmnsyc•10mo ago

yes, how are you updating the users

pip64•10mo ago

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

peerreynders•10mo 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.

pip64•10mo ago

that's what we do.

REEEEE•10mo ago

try setting {equals: false} option on the signal

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

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

ДикийOP•10mo ago

this doesn't working

REEEEE•10mo ago

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

ДикийOP•10mo ago

swiper slider

REEEEE•10mo ago

Could you show a little bit of the code?

ДикийOP•10mo ago

pip64•10mo ago

REEEEE•10mo ago

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

pip64•10mo ago

yes

REEEEE•10mo ago

Which library?

pip64•10mo 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•10mo ago

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

ДикийOP•10mo ago

REEEEE•10mo 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•10mo ago

createeffect is not called

REEEEE•10mo 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•10mo ago

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

REEEEE•10mo ago

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

peerreynders•10mo ago

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

ДикийOP•10mo ago

REEEEE•10mo 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•10mo ago

i dont understand im just using props

REEEEE•10mo ago

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

pip64•10mo ago

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

Tenor

pip64•10mo 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•10mo ago

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

pip64•10mo 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•10mo ago

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

pip64•10mo ago

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

REEEEE•10mo 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

pip64•10mo 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•10mo ago

Do you get an error?

pip64•10mo ago

second code repeats billion times

ДикийOP•10mo ago

REEEEE•10mo ago

okay, what happens when it breaks?

pip64•10mo ago

ДикийOP•10mo ago

this swiper error like

REEEEE•10mo ago

I see

ДикийOP•10mo ago

when somewhere is variable broken

pip64•10mo ago

but without {equals: true} swiper working

ДикийOP•10mo ago

or something else

REEEEE•10mo ago

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

ДикийOP•10mo 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