перенаправление на изменение реквизита в реакции не работает

#reactjs #jsx

Вопрос:

Я хочу повторно отобразить компонент, потому что я хочу изменить HTML-код JSX, который я пытался создать, чтобы повторно передать из-за нового изменения состояния.

 function todo(props) {
    
    function toggleactive(){
        
    }

    if(props.done === true){return (
        <div className={Styles.main}>
            <div className="flex items-stretch">
                <h1>{props.title}</h1>
                <button className={Styles.maxleft} onClick={() => toggleactive()}><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg></button>
            </div>

            <div className="divide-solid">

            </div>
            <div className="description">
                <p>{props.description}</p>
            </div>
            <div className="flex space-x-5 justify-end">
                <button><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg></button>
                <button><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg></button>
            </div>
        </div>
    )}
    else{
        console.log("d")
        
    
    }
}

и реализуйте его в массиве, подобном этому

 <div>
            <div className="wd-4/5 flex">
                <button onClick={   () => settodos([...todos,{"name":faker.name.jobType(),"title":"d"}])}> new </button><br></br>
                <button className="bg-red-600 font-normal font-sans rounded-full text-xl bg-opacity-75 p-1" onClick={() => settodos(deleterandom)}>delete random</button>

            </div>
            <div className="">
            {todos.map(function(idx,dx){
                return (<li>{todo({"name":idx.title,"description":"d","title":idx.title,"done":true,"key":uniqueId()})}</li>)
            })}
            </div>
        </div>

теперь я хочу записать код в активную функцию переключения для повторного рендеринга с новой переменной props.value.

Ответ №1:

ты имеешь в виду что-то вроде этого?

     const [active, setActive] = useState(false)

    function toggleactive(){
       setActive(!active)    
    }

1. Я пробовал, что это не сработало, потому что вы не можете использовать usestate в операторе if

2. @saeedAlmulla useState будет находиться непосредственно внизу function todo , следовательно, не в if заявлении.

3. @SILENT Я хочу установить компонент в одно из двух состояний, активное или неактивное, я делаю это с помощью оператора if, если состояние{ код } еще{ код } Я сделал это с помощью опоры, но проблема в том, что он не перепроверяет(оператор if), когда опора меняется.

Ответ №2:

Есть пара проблем с вашим кодом, начиная с установки вашего ключа uniqueId() . Идентификаторы должны быть уникальными, но не должны меняться при каждом запуске, как в настоящее время. Вы вызываете не Todo как правильная функция React.

 function Todo({ todo, toggleActive }) {
 return (
  ...
  <button className={Styles.maxleft} onClick={() => toggleActive(todo.id)}>
  ...
 );
}
function TodoContainer() {
 const [todos, setTodos] = useState([]);
 const toggleActive = useCallback((id) => setTodos((ts) => {
  const t = ts.find(t => t.id === id);
  t.done = !t.done;
  return [...ts];
 }), []);
 return (
  ...
  {todos.map(t => !t.done amp;amp; (<Todo todo={t} toggleActive={toggleActive} key={t.id} />))}
  ...
 );
}