Почему эта функция карты получает объект, а не строку в реакции. Мне нужно использовать item.item для рендеринга строки - PullRequest
Новая
       17

Почему эта функция карты получает объект, а не строку в реакции. Мне нужно использовать item.item для рендеринга строки

0 голосов
/ 06 августа 2020

Я пытаюсь добавить эту простую строку элемента todo в массив, который работает, но когда я использую его на карте и визуализирую, мне нужно использовать item.item, чтобы он работал, если я использую только элемент, я получаю ошибка объектов недействительна как React Child ... Кстати, это с redux. как я могу это исправить?

вот отображение списков 

const todos=useSelector(state=>state)
 <table>
        <tbody>
        <tr>
            <th>note</th>
            <th>remove</th>
            <th></th>
        </tr>
        {
            todos.map(item=>(
                <List item={item}/>
            ))
        }
        </tbody>
    </table>

вот элемент списка: 

    <tr>
    <td>{item.item}</td>
    <td>x</td>
    <td></td>
    </tr>

вот как я его добавляю 

const AddList=()=>{
const [newItem,setNewItem]=useState("")
const dispatch=useDispatch()
const handleAdder=(e)=>{
    e.preventDefault()
    dispatch(addItem(newItem))
}

return(
  <div>
    <form onSubmit={(e)=>handleAdder(e)}>
    <input value={newItem} onChange={(e)=>setNewItem(e.target.value)}></input>
    <button type="submit">add</button>
    </form>
  </div>
)
}

вот редуктор 

const todoReducer=(state=[],action)=>{

    switch(action.type){
        case('ADD_ITEM'):
        return [...state,action.newItem]
        default:{
            return state
        }
        
    }
}
export default todoReducer

1 Ответ

0 голосов
/ 06 августа 2020

потому что todos - это массив объектов, если вы не хотите использовать item.item, просто используйте деструкцию объекта следующим образом: 

 <table>
        <tbody>
        <tr>
            <th>note</th>
            <th>remove</th>
            <th></th>
        </tr>
        {
            todos.map(item=>(
                <List {...item} key={item.id}/>
            ))
        }
        </tbody>
    </table>

это передаст все ключи объекта в качестве свойств для дочернего компонента.

не забудьте добавить key для метода карты для каждого компонента.

...