const MyForm = () => {
const name = useSelector((state) => state.user.form.name);
const surname = useSelector((state) => state.user.form.surname);
const email = useSelector((state) => state.user.form.email);
const agree = useSelector((state) => state.user.form.agree);
...
}
const Field = ({ name, ... }) => {
const value = useSelector(...);
...
}
const MyForm = () => {
return (
<FormContainer ...>
<Field name="name"/>
<Field name="surname"/>
<Field name="email"/>
...
</Form>
)
}
if (todo.id === id) todo.completed = !todo.completed
return todo
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods:
...
setState updater functions (the first argument)
...
if (todo.id === id) todo.completed = !todo.completed
это сайд-эффект.if (todo.id === id) return { ...todo, completed: !todo.completed }
It's very important that the reducer stays pure. Things you should never do inside a reducer:
Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().
export function commentsReducer(state = {data: [], marker: false}, action) {
switch (action.type) {
case Comments.ADD_COMMENT: {
let newData = state.data.slice(); // копируем массив
newData.push({
postId: action.payload.postId,
body: action.payload.body,
name: action.payload.name,
id: state.data[state.data.length - 1].id + 1
});
// никакого state = ...
return {...state, is_fetching: false, data: newData};
}
}
return state;
}
setStates(prev => {
prev.map(data => {
if (data.id === Number(id)) {
(data.state === 2) ? data.state = 0 : ++data.state
}
})
})
return prev.map...
if (data.id === Number(id)) {
(data.state === 2) ? data.state = 0 : ++data.state
}
[,,,{},]
data => {
if (data.id === Number(id)) {
return (data.state === 2) ? {...data, state: 0} : {...data, state: data.state + 1}
}
return data
}
() => expression
() => { return expression }
() => ({ someObjectField: ... })
const [nameValue, setNameValue] = useState(name || "");
<TextField
...
value={nameValue}
...
/>
<Route path='/dialogue/:id' render={() => <DialogList />}/>
<Route path='/dialogue/:id' render={(props) => <DialogList {...props}/>}/>
newArray = [
...todoData.slice(0, idx),
...todoData.slice(idx + 1)
]
todoData.slice(0, idx).concat(todoData.slice(idx + 1))
Вот метод, его который надо универсализировать, например, принимает параметр "name" и делает setSatate({name}),
принимает "position" и делает setSatate({name})
setParam = (name: string, value: any) => {
this.setState({ ...this.state, [name]: value });
}
...
setParam("position", ...);
...this.state
function map(items: Array<Item>) {
...
items.push({name: "Vasya"});
...
}
map(list)
Items
, локально все ок, только мы его пушим в массив типа Array<Users>
, у которого более строгий тип. Поэтому флоу ругается.function map<T: {name: string}>(items: Array<T>) {
<Image className="card-img-top profile__img img-vehicle" source={{uri:`https://localhost/image/${params.name.image}.jpg`}} />
class FeedPost extends Component {
constructor(props) {
super(props);
this.state = {
showComments: false
}
}
handler = () => {
this.setState({
showComments: !this.state.showComments
})
};
render = () => {
const {post} = this.props;
return <li>
<div>{post.title}</div>
<div
onClick={this.handler}
style={{
cursor: "pointer",
color: "blue",
textDecoration: "underline",
userSelect: "none"
}}
>
{this.state.showComments ? "Hide comments" : "Show comments"}
</div>
{this.state.showComments && (
<ul>
{post.comments.map((comment, i) => (
<li key={i}>{comment.text}</li>
))}
</ul>
)}
<Link to={`/post/${post.id}`}>Open</Link>
</li>
}
}
в моем понимании это что-то на подобии такого: a= b+c или a=b.
const a = 1;
a; // это выражение
onInput="checkLength(3,this)"
<input id="txtF" type="number" onInput={e => checkLength(3, e.target)} />
const Element = props => {
const [styleEnabled, setStyle] = useState(false);
return (
<div
className={`myDIV ${styleEnabled ? "mystyle" : ""}`}
onClick={e => setStyle(!styleEnabled)}
>
Toggle me
</div>
);
};