anthonyshort / deku

Render interfaces using pure functions and virtual DOM
https://github.com/anthonyshort/deku/tree/master/docs
3.41k stars 130 forks source link

The first path and second path from render function unequal #426

Open JJVvV opened 8 years ago

JJVvV commented 8 years ago
let render = ({props, path, context, dispatch}) => {
    let {todo, destroy, change, state, completed} = props;

    let {editing} = context.state[path] || {};
    let onEdit = () => {
       //the path from first rendering is diffrent from second rendering.
        console.log(path);

        dispatch({type: 'state changed', path, data: {editing: !editing}});
    };
    return (
        <li onClick={onEdit} class={classname({completed, editing})}>
            <div class="view">
                <input class="toggle" type="checkbox" />
                <label>{todo.value}</label>
                <button class="destroy" onClick={destroy}></button>
            </div>
            <input class="edit" value={todo.value} onKeyUp={change} />
        </li>
    )
}

popo_2016-08-01 16-32-12

todesignandconquer commented 8 years ago

I can confirm that this is an issue as well:

image image

JJVvV commented 8 years ago

@todesignandconquer That problem disappeared when I got the latest version. Thanks.

todesignandconquer commented 8 years ago

@JJVvV I'm still having this issue and I've always been on 2.0-rc16. It's particularly an issue when I am rendering ta reusable component onto the page for a particular container that might appear multiple times. The path being unique per component instance is crucial to managing state of it, especially in combination with deku-stateful.