一、Fruit.js
import React, { useState } from 'react';
export function FruitList({ fruits, onSetFruits }) {
const del = delIndex => {
const tem = [...fruit];
tem.splice(delIndex,1);
onSetFruits(tem);
};
return (
<div>
<h2>水果列表</h2>
<ul>
{
fruits.map((item,index) => {
return (
<li key={index} onClick={() => del(index))>
{item}
</li>
)
})
}
</ul>
</div>
)
}
export function FruitAdd(props) {
const [name, setName] = useState('');
return (
<div>
<h2>增加水果</h2>
<input type='text' value={name} onChange={e => setName(e.target.value)}/>
<button onClick=(() => props.onAdd(name))>增加</button>
</div>
)
}
二、FruitReducer.js
import React, { useReducer, useEffect } from 'react';
import { FruitList, FruitAdd } from './Fruit';
function fruitReducer(state, action){
switch(action.type) {
case 'init':
case 'replace':
return action.payload;
case 'add':
return [...state, action.payload];
default:
return state;
}
}
export default function HookReducer(){
const [fruits, dispatch] = useReducer(fruitReducer,[]);
useEffect(() =>{
setTimeOut(() => {
dispatch({
type: 'init',
payload: ['apple','banana']
});
}, 1000);
}, []);
return (
<div>
<h1>User</h1>
<FruitAdd onAdd={(item) => {dispatch({type: 'add', payload: item})}}/>
<FruitList fruits={fruits} onSetFruits={cur => dispatch({type: 'replace',payload: cur})}
</div>
)
}